Please help me. The Roman numeral converter is driving me insane. I don't know what I'm doing wrong

JavaScript
1 
const input = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");

convertBtn.addEventListener("click", checkUserInput);

const checkUserInput = () => {
  const inputInt = parseInt(input.value);
 
  if(input.value===""){
    output.innerText = "Please enter a valid number"
  }
  else if (inputInt<0){
    output.innerText = "Please enter a number greater than or equal to 1";
  } 
  else if (inputInt>3999){
    output.innerText = "Please enter a number less than or equal to 3999";
  }
  else{
    toRoman(inputInt)
  }
    };

  
 const toRoman = (num) => {
   const romanNumerals = [
     {value:1000, rN:"M"},
     {value:900, rN:"CM"},
     {value:500, rN:"D"},
     {value:400, rN:"CD"},
     {value:100, rN:"C"},
     {value:90, rN:"XC"},
     {value:50, rN:"L"},
     {value:40, rN:"XL"},
     {value:10, rN:"X"},
     {value:9, rN:"IX"},
     {value:5, rN:"V"},
     {value:4, rN:"IV"},
     {value:1, rN:"I"},
   ];
   for (let i=0;i<romanNumerals.length;i++){
     if(num>=romanNumerals[i].value) {
       output.innerText = romanNumerals[i].rN + toRoman(num-romanNumerals[i].value)
       }
    }
 };
2

Could you describe the issue?

3

It says I got everything wrong except the html part and I don’t understand why. I wish I knew what the issue was…

4

I think maybe it isn’t registering any Input at all but I don’t know why this is my html:

<DOCTYPE! html>
  <html lang="en">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta charset="UTF-8">
      <link rel="stylesheet" href="styles.css">
      <title>Roman Numeral Converter</title>
    </head>
    <body>
      <h1>Roman Numeral Converter</h1>
      <input type="number" id="number">
      <button id="convert-btn">Convert</button>
      <p id="output"></p>
      <script src="script.js"></script>
    </body>
  </html>
5

What says? Are you getting any error? Does it work, when you manually try to convert number?

6

I’m not getting an error. It doesn’t work when I try manually. Nothing happens when I press Convert

7

Hi,
try moving your checkUserInput function above the eventListener.
You may still get some errors to work with but your function will work.

Also, you may want to check your toRoman function ( the for loop ) because it’s causing some sort of infinite loop, and that is not good. Try to see where you’re doing wrong and hopefully you will be good to go.

8

Thank you so much:)) I will do my best!

9

I think you need to accumulate the Roman numeral result in a variable and return it, rather than just setting the output.innerText inside the loop.

10

All of you, thank you so much for your help. It worked and I learned something for future projects:)

1 Like
11

Great job and good luck on your projects!

PS: Welcome to the FCC forum!