Build a Roman Numeral Converter Help

JavaScript
21

Hi I have been working on my roman numeral conveter but im kinda stuck. I fix a few things but now when I input i just get several I’s as the output not what the number should convert to so 4 brings back IIII not IV i could use some help thanks!

const number = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");

convertBtn.addEventListener("click",valid);

 function valid() {
   if(number.value == "") {
   output.innerText = "Please enter a valid number";
   } else if (number.value >= 4000) {
     output.innerText ="Please enter a number less than or equal to 3999";
   } else if (number.value <= 0) {
   output.innerText = "Please enter a number greater than or equal to 1";
   } else {
      romanNumeral()
   }
 }
const romanNumeral = () => {

const table = {
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,
};

for( const key in table) {
  const numberValue = table[key];

let accumulator = '';

let num = number.value;
while (numberValue <= num) {
  num -= numberValue;
  accumulator += key;
  }


output.innerText = `${accumulator}`;



 }
 return accumulator
}
22 
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css"> 
  <title>Roman Numeral Converter</title>
  </head>
  <body>
    <h1>Roman Numeral Converter</h1>
   <div class="number-box">
    <div>
      <p>Enter Number:</p>
    <input id="number" type="number" min="1"></input>
    </div>
    <div class="convert" >
    <button id="convert-btn">CONVERT</button>
    </div>
    <div id="output">
      </div>
      </div>
      <script src="./script.js"></script>
  </body>
  </html>
23

You are using a while within a for loop.
Try using just one kind of loop.

24

i will try it out thanks

25

can you put while inside for loop or do they have to be the same?

26

To keep things simple pick one type of loop.

1 Like
27

im stuck on writing the for loop for some reason i cant figure it out

28

figured out the for loop but just giving I’s every time

29

now i just get all m’s I really lost here as what is going on

30

Post your full code so the forum can assist.

31 
const number = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");

convertBtn.addEventListener("click",valid);

 function valid() {
   if(number.value == "") {
   output.innerText = "Please enter a valid number";
   } else if (number.value >= 4000) {
     output.innerText ="Please enter a number less than or equal to 3999";
   } else if (number.value <= 0) {
   output.innerText = "Please enter a number greater than or equal to 1";
   } else {
      romanNumeral()
   }
 }
const romanNumeral = () => {

const table = {
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,
};

for( const key in table) {
  const numberValue = table[key];

let accumulator = '';

for(let num = number.value;num -= numberValue;) {
  accumulator += key;
}

output.innerText = `${accumulator}`;



 }
 
}
33 
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css"> 
  <title>Roman Numeral Converter</title>
  </head>
  <body>
    <h1>Roman Numeral Converter</h1>
   <div class="number-box">
    <div>
      <p>Enter Number:</p>
    <input id="number" type="number" min="1"></input>
    </div>
    <div class="convert" >
    <button id="convert-btn">CONVERT</button>
    </div>
    <div id="output">
      </div>
      </div>
      <script src="./script.js"></script>
  </body>
  </html>
34

what are you dong here? you don’t have a stop to this loop

35

i changed the while loop to for loop to make it eaiser the same thing as i did befor just in a for loop this what i had before

let num = number.value;
while (numberValue <= num) {
  num -= numberValue;
  accumulator += key;
  }
36

here what changed but its still giving me the wrong values when i convert

onst number = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");

convertBtn.addEventListener("click",valid);

 function valid() {
   if(number.value == "") {
   output.innerText = "Please enter a valid number";
   } else if (number.value >= 4000) {
     output.innerText ="Please enter a number less than or equal to 3999";
   } else if (number.value <= 0) {
   output.innerText = "Please enter a number greater than or equal to 1";
   } else {
      romanNumeral()
   }
 }
const romanNumeral = () => {

const table = {
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,
};

let accumulator = '';

for( const key in table) {
const numberValue = table[key];

let num = number.value;
while (numberValue <= num) {
  num -= numberValue;
  accumulator += key;
  }
}

output.innerText = `${accumulator}`;

return accumulator

}
37

your num value is reset to number.value for each value of key, you may want to consider properly in which order you want things to execute
With a number.value of '9' you get accumulator: 'IXVIVIVIIIIIIIII'

38

ok so i understand the first part but i im not really understanding the second. if i input 9 shouldent it do the for loop first than the while loop and than add it to the accumulator?

39

no, the while loop is inside the for in loop, that means you get the while loop execute each time in its enterety

40

got it thank YOU!!! i move my let mun so it wouldent reset your a life save thanks for all the help!

41

yes, good job!