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

JavaScript
1

Tell us what’s happening:

I am stuck on steps 7-11. My functions look to be set properly according to the lesson but I am not getting an actual output.

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

/* file: styles.css */


/* file: script.js */
const input = document.getElementById("number");
const convert = document.getElementById("convert-btn");
const output = document.getElementById("output");

const numerals = [
  ["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]
];

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

convert.addEventListener("click", () => {
  let value = input.value;
  if (!value) {
    output.innerText = "Please enter a valid number"
  } else if (value < 0) {
    output.innerText = "Please enter a number greater than or equal to 1"
  } else if (value > 3999) {
    output.innerText = "Please enter a number less than or equal to 3999"
  } else {
    let result = "";

    for (const [roman,number] of numerals) {
      while (number < value) {
      result += roman;
      value -= number
    }
    }
  }
  output.innerText = result;
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

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

2

Can you say more about how specifically you’re stuck and what debugging you tried?

3

It won’t pass the numbers to convert into numerals. I’ve adjusted the last innerText to the correct position but still get no result for when inputting a number for conversion.

4

What exactly does “won’t pass the numbers” mean?

5

what i technically mean is that the last 4 steps are if i were to enter a number ( ex.: 9), it would output in roman numerals and it won’t. The converter button doesn’t work when i input anything.

6

incorrect, it doesn’t output the correct numerals

7

all the numerals output as once less than they are supposed to be

8

Can you give an example of what you input and what you are seeing as output and explain what you meant before because it is hard to understand you when you say “output as once less”.

9

input number 9, output is VIII

10

i meant one less, my fault

11

input 1, output nothing appears.

12

Try adding a few console.log() lines to print your variables to the console and see what they are doing.

13

it says my keydown is not defined

14

Uncaught ReferenceError: keydown is not defined
VIII
Uncaught ReferenceError: keydown is not defined
XV
Uncaught ReferenceError: keydown is not defined
DCXLVIII
Uncaught ReferenceError: keydown is not defined
MXXII
Uncaught ReferenceError: keydown is not defined
MMMCMXCVIII
Uncaught ReferenceError: keydown is not defined

15

must be this keydown?

16

What did you write in the console.log()?

Print these variables in your loop:

console.log(roman)
console.log(number)
console.log(value)
17

roman is not defined

18

i had an onclick in my html that wasn’t defined

19

M
1000
9
CM
900
9
D
500
9
CD
400
9
C
100
9
XC
90
9
L
50
9
XL
40
9
X
10
9
IX
9
9
V
5
4
IV
4
4
I
1
1

21

solved after detailing reading it for days. flipped a couple definitions in the while loop to fix it

2 Likes