Https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-roman-numeral-converter-project/build-a-roman-numeral-converter

JavaScript
1

Hallo.

i finisch to write code for Java script and HTML, but it has problem.
problem that Roman Numerals could not appreciate on the page after i click a convert button with number. i could not find waht is error.
Could you give me a hint?

my code

<!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" />
</head>
<body>
  <input id="number" type="number" />
<button type = "submit" id="convert-btn">Convert</button>
  <div id="output"></div>
<script src="script.js"></script>
</body>

const numberInfo = document.getElementById("number");
const convertButton = document.getElementById("convert-btn");
const outputInfo = document.getElementById("output");


function toRoman(num) {
    const romanNumerals = [
        { value: 1000, numeral: 'M' },
        { value: 900, numeral: 'CM' },
        { value: 500, numeral: 'D' },
        { value: 400, numeral: 'CD' },
        { value: 100, numeral: 'C' },
        { value: 90, numeral: 'XC' },
        { value: 50, numeral: 'L' },
        { value: 40, numeral: 'XL' },
        { value: 10, numeral: 'X' },
        { value: 9, numeral: 'IX' },
        { value: 5, numeral: 'V' },
        { value: 4, numeral: 'IV' },
        { value: 1, numeral: 'I' }
    ];

    let result = '';

    for (let i = 0; i < romanNumerals.length; i++) {
        while (num >= romanNumerals[i].value) {
            result += romanNumerals[i].numeral;
            num -= romanNumerals[i].value;
        }
    }

    return result;
}



const wroteNummer = numberInfo.value;
convertButton.addEventListener("click", () => {
  const num = parseInt(numberInfo.value);
   if (num > 0) {
    const result = toRoman(num);
    outputInfo.innerHTML = `<p>${result}</p>`;
  } else if (isNaN(num)) {
    outputInfo.innerHTML = '<p>Please enter a valid number</p>';
  } else if (num < 0) {
    outputInfo.innerHTML = '<p>Please enter a number greater than or equal to 1</p>';
  } else if (num > 4000) {
    outputInfo.innerHTML = '<p>Please enter a number less than or equal to 3999</p>';
  }
});
2

Hello @kenske.miyano!

Do you mean it doesn’t appear roman numerals on the page? I tested your code and it appears

There’s some logic error in your input validation

1 Like
3

thank your for yor reply.
yes i know there is error somewehere.
but i can not find it.
could you give me a advice?

4

hallo.
almost my work is finish, but there is only one error,
" When the #number element contains the number 4000 or greater and the #convert-btn element is clicked, the #output element should contain the text "Please enter a number less than or equal to 3999" ."

could you give me reason why it does not work?

const numberInfo = document.getElementById("number");
const convertButton = document.getElementById("convert-btn");
const outputInfo = document.getElementById("output");


function toRoman(num) {
    const romanNumerals = [
        { value: 1000, numeral: 'M' },
        { value: 900, numeral: 'CM' },
        { value: 500, numeral: 'D' },
        { value: 400, numeral: 'CD' },
        { value: 100, numeral: 'C' },
        { value: 90, numeral: 'XC' },
        { value: 50, numeral: 'L' },
        { value: 40, numeral: 'XL' },
        { value: 10, numeral: 'X' },
        { value: 9, numeral: 'IX' },
        { value: 5, numeral: 'V' },
        { value: 4, numeral: 'IV' },
        { value: 1, numeral: 'I' }
    ];

    let result = '';

    for (let i = 0; i < romanNumerals.length; i++) {
        while (num >= romanNumerals[i].value) {
            result += romanNumerals[i].numeral;
            num -= romanNumerals[i].value;
        }
    }

    return result;
}



const wroteNummer = numberInfo.value;
convertButton.addEventListener("click", () => {
  const num = parseInt(numberInfo.value);
   if (num > 0) {
    const result = toRoman(num);
    outputInfo.innerHTML = `<p>${result}</p>`;
  } else if (isNaN(num)) {
    outputInfo.innerHTML = '<p>Please enter a valid number</p>';
  } else if (num < 0) {
    outputInfo.innerHTML = '<p>Please enter a number greater than or equal to 1</p>';
  } else if (num > 4000) {
    outputInfo.innerHTML = '<p>Please enter a number less than or equal to 3999</p>';
  }
});
5

if your number is 4000, what happens when the code reaches this line?

6

Please do not create duplicate topics for the same challenge/project question(s). Your duplicate topic has been unlisted.

Thank you.

7

thank you. i find it!!

8

so sorry i forgot to erase it

and i have wrote so

else if (num >= 4000) {
    outputInfo.innerHTML = '<p>Please enter a number less than or equal to 3999</p>';
  }

still it doesn’t work.
could you give me adviece agein?

9

I don’t understand what you have changed, can you show your whole code again?

10

thank you for your apply
already i have done clear it.
but i ataached final code writing here

const wroteNummer = numberInfo.value;
convertButton.addEventListener("click", () => {
  const num = parseInt(numberInfo.value);
   if (num > 0 && num < 4000) {
    const result = toRoman(num);
    outputInfo.innerHTML = `<p>${result}</p>`;
  } else if (isNaN(num)) {
    outputInfo.innerHTML = '<p>Please enter a valid number</p>';
  } else if (num <= 0) {
    outputInfo.innerHTML = '<p>Please enter a number greater than or equal to 1</p>';
  } else if (num >= 4000) {
    outputInfo.innerHTML = '<p>Please enter a number less than or equal to 3999</p>';
  }
});

thank you very much for your help

11

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