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

JavaScript
1

Tell us what’s happening:

The tests that say “When the #number element contains the number x” are failing even though my code appears to be working and returning the expected results.

I looked up the script on the example and see it uses some type of array method but I did it my way because the previous lesson was focused on recursion so I thought that was what was needed here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  Hello!
  <form>
  <input id="number" />
  <button id="convert-btn">Submit</button>
  </form>
  <div id="output"></div>
  <script src="script.js"></script>
</body>
</html>

/* file: script.js */
const inputValue = document.getElementById("number");
const inputButton = document.getElementById("convert-btn");
const outputValue = document.getElementById("output");
let errorText =""
let num = 0;
let result = "";

function isValid () {
 if (inputValue.value == "") {
    errorText = "Please enter a valid number";
  } else if (parseInt(inputValue.value) < 1){
    errorText = "Please enter a number greater than or equal to 1";
  } else if (parseInt(inputValue.value) >= 4000) {
    errorText = "Please enter a number less than or equal to 3999";
  } else {
    num = parseInt(inputValue.value)
    conversion()
  }
}

function output () {
  if (errorText !== "") {
    outputValue.innerText = errorText;
  }
   else {
     outputValue.innerText = result;
   }
}

function conversion() {
  if (num / 1000 >= 1) {
    result = result + "M";
    num -= 1000;
    conversion();
  } else if (num >= 900) {
    result = result + "CM";
    num -= 900;
    conversion();
  } else if (num / 500 >= 1) {
    result = result + "D";
    num -= 500;
    conversion();
  } else if (num >= 400) {
    result = result + "CD";
    num -= 400;
    conversion();
  } else if (num / 100 >= 1) {
    result = result + "C";
    num -= 100;
    conversion();
  } else if (num >= 90) {
    result = result + "XC";
    num -= 90;
    conversion();
  } else if (num / 50 >= 1) {
    result = result + "L";
    num -= 50;
    conversion();
  } else if (num >= 40) {
    result = result + "XL";
    num -= 40;
    conversion();
  } else if (num / 10 >= 1) {
    result = result + "X";
    num -= 10;
    conversion();
  } else if (num >= 9) {
    result = result + "IX";
    num -= 9;
    conversion();
  } else if (num / 5 >= 1) {
    result = result + "V";
    num -= 5;
    conversion();
  } else if (num >= 4) {
    result = result + "IV";
    num -= 4;
    conversion();
  } else if (num >= 1) {
    result = result + "I";
    num -= 1;
    conversion();
  }
}

inputButton.addEventListener("click", () => {
  result = ""
  isValid();
  output();
});



/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0

Challenge Information:

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

2

i copied the js and html (and skipped the css) code and tried to type in the following in sequence:

4000

this gave me the expected result which was:
Please enter a number less than or equal to 3999

After that, without reloading the page, I erased the 4000 and typed 9

The program failed to transform it and the same message above was still shown on the screen.

Try this test and if you can see the problem like I did, then add some console.logs to try to trace why that is failing.

3

Thanks. I see the same behavior. After looking into it for a bit I’m not sure why it won’t take a new input but that does seem to be the source of my problem and why my codes not passing the test. I’ll keep investigating.

4

I figured it out! I needed to reset my errorText to “” at the beginning of my isValid function before the if statements. I’m not sure exactly why this caused it to fail though. Thank you for the help!

1 Like
5

@zooly132 great that you found the issue!

In case you still want to know, based on your finding I suspect the bug was likely because errorText was declared at the global (the highest) scope. It kept the last value you assigned in the isValid function (until you reset it).

The error might have been in the output function then.

1 Like