Roman Numeral Converter Project

JavaScript
1

so IX will not work and neither will XVI im wondering where i went wrong:

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;
    return answer;
  } 
})
2

Hi @collinvaughn

Looks like you have an off by one error.
Check your loop.

What is the answer variable?

Happy coding

3

can you provide also your html for debugging purposes?

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

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

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