Build a Roman Numeral Converter

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

 const romanNums = [
    ["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]
  ];
  let roman = "";

conBtn.addEventListener("click", () => {
  if (!numb.value) {
    output.textContent = "Please enter a valid number";
  } else if (numb.value <= 0) {
    output.textContent = "Please enter a number greater than or equal to 1";
  } else if (numb.value >= 4000) {
    output.textContent = "Please enter a number less than or equal to 3999";
  } else {
    for (let i = 0; i < romanNums.length; i++) {
      if (numb.value >= romanNums[i][1]) {
        roman += romanNums[i][0]
        numb.value -= romanNums[i][1]
        output.textContent = roman;
        i--
        console.log(output.textContent)
      }
    }
  } 
});

Hello everyone!
Scratching my head over this one, tried copying my solution from the legacy version of this project but I’ve hit the wall here by one annoying little detail, which is that the textContent ADDS every conversion onto the previous one instead of clearing and giving a separate answer.

How should I go about fixing that detail or do I have to scrap my entire solution and approach it differently? Thanks in advance.

2

why don’t you just reset the textContent at the beginning of the callback function that triggers on conBtn?

3

I actually thought about that and tried a bit. Couldn’t get it done.

How do I go about it?

4

I’m sorry I’m not sure how to answer because the question is kind of vague and I can’t write the code for you.

you clearly have code that uses textContent, so I assume you must know how to use it.

so just do the same thing at the start of the callback function but set textContent to an empty string.

5 
conBtn.addEventListener("click", () => {
  **output.textContent = ""**
  if (!numb.value) {
    output.textContent = "Please enter a valid number";
  } else if (numb.value <= 0) {
    output.textContent = "Please enter a number greater than or equal to 1";
  } else if (numb.value >= 4000) {
    output.textContent = "Please enter a number less than or equal to 3999";
  } else {
    for (let i = 0; i < romanNums.length; i++) {
      if (numb.value >= romanNums[i][1]) {
        roman += romanNums[i][0]
        numb.value -= romanNums[i][1]
        output.textContent = roman;
        i--
        console.log(output.textContent)
      }
    }
  } 
});

If you mean like this then it still just appends it to the previous output. like I, II, III, IIII etc.

6

Looks like this is the reason.
Move this code so it runs every time your conBtn callback runs.

1 Like
7

Great! Thanks!

So the reason was that the roman variable acted independently outside of the function?

8

The roman variable was declared globally and therefore would only get reset if your whole page was refreshed. The test cases do not do that so the Roman variable would not have been reset each testcase unless it became part of the purchase click.

1 Like