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

JavaScript
1

Tell us what’s happening:

My output is correct when tested both locally and on the freeCodeCamp test, yet when I “Run the tests” the tests don’t succeed (only regarding some of the output). Is this a bug on freeCodeCamp’s part, or do I miss something?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width-device-width, initial-scale=1.0">
  <title>Roman Numeral Converter</title>
</head>
<body>
  <input id="number"></input>
  <button id="convert-btn">Convert</button>
  <p id="output"></p>
  <script src="script.js"></script>
</body>
</html>

/* file: script.js */
const convertInput = document.getElementById('number');
const convertBtn = document.getElementById('convert-btn');
const output = document.getElementById('output');
let romanOutput = "";
const numerals = [
    { arabic: 1000, roman: 'M' },
    { arabic: 900, roman: 'CM' },
    { arabic: 500, roman: 'D' },
    { arabic: 400, roman: 'CD' },
    { arabic: 100, roman: 'C' },
    { arabic: 90, roman: 'XC' },
    { arabic: 50, roman: 'L' },
    { arabic: 40, roman: 'XL' },
    { arabic: 10, roman: 'X' },
    { arabic: 9, roman: 'IX' },
    { arabic: 5, roman: 'V' },
    { arabic: 4, roman: 'IV' },
    { arabic: 1, roman: 'I' }
]

function convert() {
    var inputNumber = Number(convertInput.value);
    if (!convertInput.value || isNaN(convertInput.value)) {
        output.innerText = "Please enter a valid number";
        return;
    } else if (convertInput.value <= 0) {
        output.innerText = "Please enter a number greater than or equal to 1";
        return;
    } else if (convertInput.value >= 4000) {
        output.innerText = "Please enter a number less than or equal to 3999";
        return;
    } else {
        output.innerText = '';
        for (let i = 0; i < numerals.length; i++) {
            while (inputNumber >= numerals[i].arabic) {
                romanOutput += numerals[i].roman;
                inputNumber -= numerals[i].arabic;
            }
            if (inputNumber <= 0) {
                output.innerText = romanOutput;
                break;
            }
        }
        output.innerText = romanOutput;
    }
    console.log("convertInput.innerText, a.k.a. convertInput.value: " + convertInput.value);
}

convertBtn.addEventListener("click", convert);

/* 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/131.0.0.0 Safari/537.36

Challenge Information:

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

2

You should not make a global variable like this, as it makes your function a one use function.

Also, you shouldn’t use var.

1 Like
3

Thank you. I didn’t expect it, but changing the

let romanOutput = “”;

From global to locally in the function fixed the problem!
I still need to figure out what exactly happens that the change of global to local to function scope makes it that the let romanOutput doesn’t reset after one use of the function when global, but does reset when used inside the function.

And thanks for pointing out not using the var, even though in this particular usecase it doesn’t make a difference in terms of its effect, it’s probably important to distinguish between the usecase of a var vs a let. It might be worth practicing with to get used to scope.

4

Your code contains global variables that are changed each time the function is run. This means that after each function call completes, subsequent function calls start with the previous value. To fix this, make sure your function doesn’t change any global variables, and declare/assign variables within the function if they need to be changed.

Example:

var myGlobal = [1];
function returnGlobal(arg) {
  myGlobal.push(arg);
  return myGlobal;
} // unreliable - array gets longer each time the function is run

function returnLocal(arg) {
  var myLocal = [1];
  myLocal.push(arg);
  return myLocal;
} // reliable - always returns an array of length 2
1 Like