[HELP] Build a Roman Numeral Converter - variable undefined

JavaScript
1

Hello everyone,

I used the “Get Help” button to create a new help post on the forum but it does not seem to show on my forum profile activity so I will just create a topic directly here. Sorry if there is a duplicate.

So I tried searching for a post with a similar issue first but everyone’s code is slightly different it does not really give an exact answer to mine.

The problem is I am done working on my code and it seems to work fine locally when I try it in VSCode’s preview or when I open it directly in Brave, Firefox, etc.
But when I pasted it in the FCC website to check if all requirements where met it tells me in the console that my num variable is not defined. Here is the code:

HTML:

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

JavaScript:

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

const isValidInput = (n) => {
    num = parseInt(n)
    if (Number.isInteger(num)) {
        if (num <= 0) {
            alert("Please enter a number greater than or equal to 1")
            return false
        } else if (num >= 4000) {
            alert("Please enter a number less than or equal to 3999")
            return false
        } else {
            return true
        };
    } else {
        alert("Please enter a valid number")
        return false
    };
};

const arabicNumeralToRomanConversion = (n) => {
    const romanNumbers = [
        {"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 convertionResult = []
    let num = parseInt(n)
    romanNumbers.forEach((obj) => {
        while (num > 0) {
            if (num >= Object.values(obj)[0]) {
                convertionResult.push(Object.keys(obj)[0])
                num -= Object.values(obj)[0]
            } else {
                break
            }
        }
    })
    return convertionResult.join("")
};

convertBtn.addEventListener("click", () => {
    output.innerText = ""
    isValidInput(input.value) ? output.innerText = arabicNumeralToRomanConversion(input.value) : output.innerText = ""
    });

input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        output.innerText = ""
        isValidInput(input.value) ? output.innerText = arabicNumeralToRomanConversion(input.value) : output.innerText = ""
    };
});

I do define it in the conversion function right before my foreach loop and give it the value of the string contained in input.value parsed into an int but I might be missing somehting. I just can’t wrap my head around why it does not on the website when it gives me the correct answer or the correct alert message locally.

Thank you for your help.

2

you never declare the num variable. The editor in freeCodeCamp runs in strict mode, which means you must declare all variables

to have the same behaviour, add to your local environment as first line

'use strict'
3

You need to use let or const. num is not declared in this scope.

4

Oh ok, thank you @ILM and @JeremyLT for the answers. I did not know about the strict mode, it will be helpful for silly oversights like this one in the future.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.