Hey im working on the roman numeral converter and i cant seem to figure out the part were the roman rumerals are generated. I click convert and it does nothing somethings wrong some help would be appreciate thanks.
Hey there,
Please update the message to include your code.
When you enter a code, 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.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
1 Like
const number = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");
convertBtn.addEventListener("click",alert);
function alert() {
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 = (num) => {
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];
while (numberValue <= num) {
num -= numberValue;
accumulator += key;
}
}
let accumulator = '';
output.innerText = `${accumulator}`;
return accumulator;
}
<!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>
I would not use alert here, you are overwriting the built-in alert function
you can’t reference a variable you have not created yet
what is the value you give to the num parameter?
accumulator += key;
thanks for the help you mean the key right?
im nout sure i understand num i just used it for my while loop
num is undefined and accumulator is used before being defined, key is fine as you use it inside your for ... in loop as loop variable
so what value do you want num to have?
ok i have moved my accumulator upso its before my while loop
im just kind lost on num
so needs a vlaue like be a reference for something?
you can’t use it in the loop condition if you don’t assign it a value, as it is your function parameter I expect to see the function called with an argument, but there are many different ways there
let num = number.value;
while (numberValue <= num) {
num -= numberValue;
accumulator += key;
}
}
i tried this but nothing i assume you could be the let num in the function parameter?
i assume it should equal the number.value as thats the number being inputed into the conveter
that is a respectable approach, just make sure to remove the function parameter!
i did i took it out first
im getting an Uncaught ReferenceError: accumulator is not defined I guess after i moved it
i fixed the reference error by moving the
output.innerText = ${accumulator};
return accumulator; in to the for loop but i still can get anything to happen
my code so far
const number = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");
convertBtn.addEventListener("click",alert);
function alert() {
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;
}
}
if I remove the accumlator return i just get the roman numural for I so i get 3 Is for 3 or 300 is for 300 but no roman numerals except that one
i still cant figure it out im kinda lost