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

JavaScript
1

Tell us what’s happening:

The Convert button does not do anything when I press it

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Roman Numeral Converter</title>
    <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">
      <button id="convert-btn">
      <div id="output"></div>
      <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const input = document.getElementById("number");
const convert = document.getElementById("convert-btn");
const output = document.getElementById("output");
const numeral = [
  ["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 >= 4000) {
    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;
  }
})


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

Open the console, when clicking the button, there’s an error displayed.