Build a Roman Numeral Converter - Test cases 5,6,7 and 13 not passed

JavaScript
1

My test cases 5,6,7 and 13(last) is passed even though the output is correct. I checked the console for the error and here it is :

[TypeError: Cannot read properties of null (reading ‘innerText’)]
[TypeError: Cannot read properties of null (reading ‘innerText’)]
[TypeError: Cannot read properties of null (reading ‘innerText’)]
[TypeError: Cannot read properties of null (reading ‘innerText’)]

Heres my JavaScript Code:

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

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

const convertToRoman = (num) => {
    for (let i = 0; i < numbers.length; i++) {
        while (num - numbers[i] >= 0) {
            result = result + romans[i];
            num -= numbers[i];
        }
        if (num === 0) {
            break;
        }
    }
    return result;
}

const convert = () => {
    const intNum = parseInt(number.value);
    if(number.value==="")
    {
        output.classList.remove("hidden");
        output.setAttribute("id", "error");
        output.innerText="Please enter a valid number"
    }
    else if (intNum <= 0 || intNum > 3999) {
        output.classList.remove("hidden");
        output.setAttribute("id", "error");
        output.innerText = `Please enter a number ${intNum <= 0 ? "greater" : "less"} than or equal to ${intNum <= 0 ? "1" : "3999"}.`
    } else {
        output.classList.remove("hidden");
        output.setAttribute("id", "output");
        output.innerText = `${convertToRoman(intNum)}`;
    }
    result = "";
};


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

My HTML code is :

<!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 Number Converter</title>
</head>
<body>
    <main>
        <div id="converterBox">
            <h1>ROMAN NUMERAL CONVERTER</h1>
            <div id="converter">
                    <label for="number"><strong>Enter a Number:</strong></label>
                    <input type="number" id="number" required>
                    <button type="submit" id="convert-btn">Convert</button>
            </div>
            <div id="output" class="hidden"></div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

My CSS code is :

body{
    background-color: rgb(27, 27, 50);
    color: #ffffff;
}

h1{
    margin: 100px 0px 40px 0px;
    text-align: center;
    width: 29vw;
}
#converterBox{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

#converter{
    width: min(100vw, 400px);
    font-size: 1.8rem;
    min-width: 100px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 20px;
    background-color: #3b3b4f;
    border: 4px solid #ffffff;
    padding: 30px 40px;
    margin-bottom: 40px;
}

input{
    width: 100%;
    height: 5.5vh;
    background-color: #0a0a23;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: larger;
    padding: 2px;
}
button{
    width: 100%;
    height: 5.5vh;
    background-color: #fec546;
    border: 4px solid #ffb618;
    padding: 2px;
    font-size: 20px;
    cursor: pointer;
}

#output{
    width: min(100vw, 400px);
    font-size: 2.2rem;
    min-width: 100px;
    background-color: #3b3b4f;
    border: 4px solid #ffffff;
    padding: 20px 40px;
    text-align: center;
}

.hidden{
    display: none;
}

#error{
    width: min(100vw, 400px);
    font-size: 2rem;
    min-width: 100px;
    background-color: #ffadad;
    border: 4px solid #850000;
    color: #850000;
    padding: 20px 40px;
    text-align: center;
}
2

try moving this out of the global-scope.
The tests run without reloading the page, so this global variable will hold whatever the value from the previous test generated in it.

(don’t use globally scoped variables unless it is absolutely necessary. Always pass the variables from one function to another as needed)

3

I tried it again ,this time I didn’t use global variable instead made result a local variable still the same test cases are not getting passed and the console output is the same.

I declared “result” locally in the function convert and passed it as argument in convertToRoman function and called it.

here’s the edited code part:

const convertToRoman = (num,result) => {
    for (let i = 0; i < numbers.length; i++) {
        while (num - numbers[i] >= 0) {
            result = result + romans[i];
            num -= numbers[i];
        }
        if (num === 0) {
            break;
        }
    }
    return result;
}

const convert = () => {
    let result = "";
    const intNum = parseInt(number.value);
    if(number.value==="")
    {
        output.classList.remove("hidden");
        output.setAttribute("id", "error");
        output.innerText="Please enter a valid number"
    }
    else if (intNum <= 0 || intNum > 3999) {
        output.classList.remove("hidden");
        output.setAttribute("id", "error");
        output.innerText = `Please enter a number ${intNum <= 0 ? "greater" : "less"} than or equal to ${intNum <= 0 ? "1" : "3999"}.`
    } else {
        output.classList.remove("hidden");
        output.setAttribute("id", "output");
        output.innerText = `${convertToRoman(intNum,result)}`;
    }
};
4

I’m not able to test your code.
When you try, do any of the tests pass?

5

Yes the rest of the test cases passed , only the test cases where the input are less than 1 and greater than 3999 are not getting passed.

6

Update

In the convert function, in the1 “if”, “else if” and “else” statement, I am changing the id of the “output” div element to implement a part of CSS ,which changes the color of output box and text when the input is less than 1 or greater than 3999.

In the if and else if statement the line is :

output.setAttribute(“id”, “error”);

Scenario 1

In that particular line when I am changing the “error” to “output”.

The test cases 6,7 and 13(last) passes and only test case 5 doesn’t pass.

Scenario 2

If I remove that particular line from the “else if” part of the function.

The test case 13(last) passes while the test cases 5,6,7 do not pass.

Scenario 3

if I remove that line from the “else if” part and also from the “else” part.

All the test cases from 5 to 13(last) fail.

scenario 4

Removing the line entirely from all the entire if -else if- else case .
Solves the issue.

I don’t understand why though

8

okay sorry, I was testing your code with the wrong project (i thought you were doing palindrome project, not sure why).
Would be great if you include a link to the project in your original post for convenience.

9

I just updated the post in the comment section, apparently I fixed the code but didn’t understand why the error occured.

10

the problem was the id of the output element
you were changing it in your js to error so the test couldn’t find it

1 Like