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

JavaScript
1

Please, help! My converter can only show messages when input is invalid, it doesn’t work

const input = document.getElementById("number");
const result = document.getElementById("output");
const button = document.getElementById("convert-btn");
const buttonClick = () => {
  if (input.value === "" || input.value === null) {
    result.innerText = "Please enter a valid number";
  } else if (input.value < 1) {
    result.innerText = "Please enter a number greater than or equal to 1";
  } else if (input.value >= 4000) {
    result.innerText = "Please enter a number less than or equal to 3999";
  } 
};
button.addEventListener("click", buttonClick);

function convertToRoman(input) {
const numerals = {
  1: 'I',
  4: 'IV',
  5: 'V',
  9: 'IX', 
  10: 'X',
  40: 'XL',
  50: 'L',
  90: 'XC',
  100: 'C',
  400: 'CD',
  500: 'D',
  900: 'CX',
  1000: 'M'
};

const keys = Object.keys(numerals).reverse();
let romans = "";

while (input > 0) {
  let alreadyModified = false;
  keys.forEach((key => {
    if (input >= key && !alreadyModified) {
      input -= key;
      result.innerText += romans;
      alreadyModified = true
    }
    return
  }))
}

};

button.addEventListener("click", (() => convertToRoman(Number(input.value))))
2

Already solved, having problem with a potential infinite loop only

const input = document.getElementById("number");
const result = document.getElementById("output");
const button = document.getElementById("convert-btn");
const buttonClick = () => {
  if (input.value === "" || input.value === null) {
    result.innerText = "Please enter a valid number";
  } else if (input.value < 1) {
    result.innerText = "Please enter a number greater than or equal to 1";
  } else if (input.value >= 4000) {
    result.innerText = "Please enter a number less than or equal to 3999";
  } 
};
button.addEventListener("click", buttonClick);

function convertToRoman(input) {
const numerals = {
  1: 'I',
  4: 'IV',
  5: 'V',
  9: 'IX', 
  10: 'X',
  40: 'XL',
  50: 'L',
  90: 'XC',
  100: 'C',
  400: 'CD',
  500: 'D',
  900: 'CX',
  1000: 'M'
};

const keys = Object.keys(numerals).reverse();
let romans = "";

while (key => input) {
let alreadyModified = false;
  keys.forEach((key => {
    if (input >= key && !alreadyModified) {
      romans +=numerals[key];
      input -= key;
      alreadyModified = true;
      return;
  }
  result.innerText = romans;
    
  }))
}

};

button.addEventListener("click", (() => convertToRoman(Number(input.value))))
4

please provide your html too, it’s needed for debugging

5

Here it is

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport", content="width=device-width , initial scale=1.0">
    <link rel="stylesheet", href="styles.css">
    <title>Roman Numeral Converter</title>
  </head>
  <body>
    <h1>Roman Numeral Converter</h1>
    <div id="container">
      <label id="label" for="number">Enter a number </label>
      <input type="number" id="number" value="number" name="number">
      <button type="button" id="convert-btn">Convert</button>
    </div>
    <div id="output"></div>
    <script src ="script.js"></script>
  </body>
</html>
6

I have 2 event listeners on the same event below, they are conflicting (works only one or another). How can I fix it?

const input = document.getElementById("number");
const result = document.getElementById("output");
const button = document.getElementById("convert-btn");
const buttonClick = () => {
  if (input.value === "" || input.value === null) {
    result.innerText = "Please enter a valid number";
  } else if (input.value < 1) {
    result.innerText = "Please enter a number greater than or equal to 1";
  } else if (input.value >= 4000) {
    result.innerText = "Please enter a number less than or equal to 3999";
  } 
};

function convertToRoman(input) {
const numerals = {
  1: 'I',
  4: 'IV',
  5: 'V',
  9: 'IX', 
  10: 'X',
  40: 'XL',
  50: 'L',
  90: 'XC',
  100: 'C',
  400: 'CD',
  500: 'D',
  900: 'CX',
  1000: 'M'
};

const keys = Object.keys(numerals).reverse();
let romans = "";

while (key => input) {
let alreadyModified = false;
  keys.forEach((key => {
    if (input >= key && !alreadyModified) {
      romans +=numerals[key];
      input -= key;
      alreadyModified = true;
      return;
  }
  result.innerText = romans;
    
  }))
}

};

button.addEventListener("click", buttonClick);
button.addEventListener("click", (() => convertToRoman(Number(input.value))))
7

I don’t understand the question exactly? You should only assign one event listener here.

1 Like
8

what is this? I don’t understand your condition, why do you have a function?

9

don’t do this, have only one event listener on button

1 Like
10

It is not a function, it is a “while” loop with a condition that key is bigger than or equal to user’s input

11

that’s an arrow function, the bigger than or equal comparison operator is different

2 Likes
12 
const input = document.getElementById("number");
const result = document.getElementById("output");
const button = document.getElementById("convert-btn");
function convertToRoman(num) {
  if (input.value === "" || input.value === null) {
    result.innerText = "Please enter a valid number";
  } else if (input.value < 1) {
    result.innerText = "Please enter a number greater than or equal to 1";
  } else if (input.value >= 4000) {
    result.innerText = "Please enter a number less than or equal to 3999";
  } else {romanConverter()};

function romanConverter() {
const numerals = [
  {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 res = "";

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

}};

button.addEventListener("click", convertToRoman);

I’ve rewritten the code, now I cannot see the result of converting, why?

13

Thanks God, I have finally coped with it. Replaced num with value of the input and the code passed

14

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