Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

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

maybe try to add script.js in the body

I tried and that’s not it :confused:

You are doing it right, just one little thing.

Here, you are executing that function but as you know this function takes a parameter called num which is the number that user enters. This way the function will not get that as you didn’t pass it. To solve it, you can write a function in the event listener and inside that function call the convertToRoman function with the appropriate parameter but don’t forget to pass it as a number using Number() cause if you pass it like this: convertToRoman(num.value) it is actually a string not a number so you need to convert it to a number.

Example:

convertBtn.addEventListener("click", () => {
   convertToRoman(Number(num.value));
});

Then, you will see that the only tests that you need to pass is the conditions of higher than 3999 or the user didn’t enter anything and all that conditions i think you can do ( do not forget to use return at the end of each condition to exit the function ).

1 Like