Tell us what’s happening:
Any idea why the event listener isn’t working? The function works
Your code so far
<!-- file: index.html -->
<html lang=en>
<meta charset =utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<body>
<input id="number" placeholder="Enter a number"></input>
<div id="space"></div>
<button id="convert-btn">Convert</button>
<div id="space"></div>
<div id="output"></div>
</body>
<script src="script.js"></script>
</html>
/* file: styles.css */
#number{
width: 200px;
height: 50px;
background-color: blue;
color: white
}
#space{
height: 10px;
background-color: white;
}
#convert-btn{
width: 200px;
height: 50px;
background-color: green;
color: white
}
#output{
margin-top: 10px;
background: white;
display: block;
border-top: solid black;
border-bottom: solid black;
border-left: solid black;
border-right: solid black;
padding: 10px 50px 30px 0;
}
/* file: script.js */
const num = document.getElementById("number")
const convertBtn = document.getElementById("convert-btn")
const output = document.getElementById("output")
const numerals = {
1000: "M",
900: "CM",
500: "D",
400: "CD",
100: "C",
90: "XC",
50: "L",
40: "XL",
10: "X",
9: "IX",
5: "V",
4: "IV",
1: "I"
}
const keys = Object.keys(numerals).reverse()
function convertToRoman(num) {
let answer = "";
while (num > 0) {
let modified_in_this_loop_already = false;
keys.forEach((key) => {
if (num >= key && !modified_in_this_loop_already) {
num -= key;
answer += numerals[key];
modified_in_this_loop_already = true;
}
})
}
output.innerText = answer
}
convertBtn.addEventListener("click", convertToRoman)
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter