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

JavaScript
1

Tell us what’s happening:

Number 4 seems to fail. although when I test it, it works. When you click on the #convert-btn element without entering a value into the #number element, the #output element should contain the text “Please enter a valid number”.

Then I’m having issues with my for loop to convert the number.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
  <link rel="stylesheet" src="./styles.css">
  </head>
  <body>
    
  <input id="number" type="number">
  <button id="convert-btn">Convert</button>
  <div id= "output"></div>

  <script src="./script.js"></script>
</body>
</html>

/* file: script.js */
const input = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");

const numerals = [
["M", 1000],
["CM", 900],
["D", 500],
["CD", 400],
["C", 100],
["XC", 90],
["L", 50],
["XL", 40],
["X", 10],
["IX", 9],
["V", 5],
["IV", 4],
["I", 1]
];

input.addEventListener("keydown", e => {
  if (e.key === "Enter"){
    convert.click()
  }
});


convertBtn.addEventListener("click", () => {
  let value = input.value;
  if (!value) {
    output.innerText = "Please enter a valid number"
  } else if (value < 0) {
    output.innerText = "Please enter a number greater than or equal to 1"
  } else if (value > 4000){
    output.innerText = "Please enter a number less than or equal to 3999"
  } else {
    let result = "";

    for (const [roman,number] of numerals) {
      while (number < value) {
        result += roman;
        value -= number;
      }
      output.innerText = result;
    }
  }
})

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Challenge Information:

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

2

the test for “Please enter a valid number” is passing, the test I see failing is for

When the #number element contains the number 4000 or greater and the #convert-btn element is clicked, the #output element should contain the text "Please enter a number less than or equal to 3999" .

3

I’m not sure what you are trying to tell me? As that is what I was saying. When you test it out the code works. why is it not passing?

4

I’m telling you that the test is passing

5

I meant to copy “Please enter a number less than or equal to 3999” is not passing even though the code works. same with the for loop

6

what happens when you write 4000 in the input element and press the button?

also what happens when you write 0 in there?

1 Like
7

oh… Lol I read it wrong. thank you for clarifying. Can you help me with the for loop? I noticed some work and some don’t

8

I think I see the issue. but everytime I change it. it freezes. while statement should be number >= value

9

I don’t know what you want to do with it, can you explain?

10

Right now, I can’t do anything. everytime I input a value or try to run the code the browser freezes and crashes.

11

It’s a result of an infinite loop.

Compare the following:

while statement should be number >= value

Original:

      while (number < value) {
        result += roman;
        value -= number;
      }

The update is saying that number (for example “M”:1000) is greater than value, value - 1000. In this case, value will always be lesser than number when the while loop runs.

You’ve almost got the test~ :smiley:

1 Like
12

I switched the code to for (const [roman,number] of numerals) {
while (number >= value) {
result += roman;
value -= number;
}
output.innerText = result;
}
}
})

now it wont run :frowning:

13

Take this as an example:
If the value (input) is 350.
Since number is the value of the Roman number. We’ll use an example like “M” which is 1000.

In your new code:

While number (1000) is more than or equals to value (350){
value (350) -= number (1000) 
}

The while loop continues the check because it is now

While number (1000) is more than or equals to value (-650){
value -= number; 
}

The value keeps decreasing which means the while loop will always be true, the loop is unable to exit.

The original code is almost right, since it meant:
If number is less than value, execute the code which reduces value until it is less then number.
Eventually, value will be less than or equals to number and the loop ends.

It doesn’t pass the test because when you enter something like 16, it ends prematurely and returns XV. It is missing the “I” due to the lack of the equals sign.

14

Now it returns a read only error in the console?

15

with what code it raises that error?

16

Uncaught TypeError: “result” is read-only

17

that is not the code that raises the error, that is the error

18

Sounds like you change the result declaration to use const instead of let.

19

Tried. It still produces the same error

20

Try this:

  1. Copy the original html and js code back in.

When I ran the test, the unfulfilled criteria are 6-11.
Is that is what you have?