My code doesn’t work for the roman numeral conversions, I think the issue may be with the for loop ?
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<title>Roman Numeral Converter</title>
</head>
<body>
<h1 class="title">Roman Numeral Converter</h1>
<p>Enter A Value</p>
<button class="btn" id="convert-btn" type="button">
Convert!</button>
<input id="number" type="number" placeholder="e.g.48..."></input>
<p id="output"></p>
<footer class="footer">© made by Liz<3</footer>
<script src="./script.js"></script>
</body>
</html>
/* file: script.js */
const convertBtn= document.getElementById("convert-btn");
const input= document.getElementById("number");
const output= document.getElementById("output")
const numeral= [
{ 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" }
];
input.addEventListener("keydown", e => {
if (e.key === "Enter"){
convert.click()
}
})
convertBtn.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, numer] of numerals){}
while (number<value){
result +=roman;
value -=number
}
output.innerText= result
}
} )
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter
Can you be more specific? What is happening when you run your code? How is it different than you except? (Please don’t just say that the tests are failing)
lunaxliz:
input.addEventListener("keydown", e => {
if (e.key === "Enter"){
convert.click()
}
})
convertBtn.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, numer] of numerals){}
while (number<value){
result +=roman;
value -=number
}
output.innerText= result
}
} )
The number to roman numeral conversion isn’t working, so when a number is entered I just get one of the text alert messages hence why I’m looking at the for loop which should be trigger conversion
thanks i’ve fixed the typo but still not passing
Please share your updated code
What alert message are you seeing? Could there be an issue with the code that triggers that alert?
//HTML//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<title>Roman Numeral Converter</title>
</head>
<body>
<h1 class="title">Roman Numeral Converter</h1>
<p>Enter A Value</p>
<button class="btn" id="convert-btn" type="button">
Convert!</button>
<input id="number" type="number" placeholder="e.g.48..."></input>
<p id="output"></p>
<footer class="footer">© made by Liz<3</footer>
<script src="./script.js"></script>
</body>
</html>
//Javascript//
const convertBtn= document.getElementById("convert-btn");
const input= document.getElementById("number");
const result= document.getElementById("output")
const numeral= [
{ 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" }
];
function convertToRoman(value){
let result=""
}
input.addEventListener("keydown", e => {
if (e.key === "Enter"){
convert.click()
}
})
convertBtn.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 {
for (const[roman, number] of numerals){}
while (number<value){
result +=roman;
value -=number
}
output.innerText= result
}
} )
ILM
May 9, 2025, 2:35pm
9
I’ve edited your post to improve the readability of the code. 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.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
I’m getting this alert- “Please enter a number less than or equal to 3999”. I used the same format for all my alerts and they were working fine before the for loop which should be trigger conversion?
ILM
May 9, 2025, 2:38pm
11
are you sure this is how you compare two values?
lunaxliz:
value => 3999
you made a different structure here
oo a typo thank you it should be >= for greater than or equal… i’ve updated this but the issue persists
ILM
May 9, 2025, 2:42pm
13
none of your code has an alert method
are you sure you are sharing all your code with us?
Yes this is all my code, I’m using output.innerText to display the message rather than alert as the same code formatted as an alert wasn’t passing the tests
The instructions are very precise. If it asks for an alert, it will need to be a js alert not output.innerText to display the message.
Please share your updated code once you have made that change.
I’ve changed to alerts and now only the first 3 stories pass
const convertBtn= document.getElementById("convert-btn");
const input= document.getElementById("number");
const result= document.getElementById("output")
const numeral= [
{ 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" }
];
function convertToRoman(value){
let result=""
}
input.addEventListener("keydown", e => {
if (e.key === "Enter"){
convert.click()
}
})
convertBtn.addEventListener("click", ()=>{
let value= input.value;
if(!value){
alert ("Please enter a valid number")
}
else if (value<0){
alert ("Please enter a number greater than or equal to 1")
}
else if (value >= 3999){
alert= ("Please enter a number less than or equal to 3999")
}
else {
for (const[roman, number] of numerals){}
while (number<value){
result +=roman;
value -=number
}
output.innerText= result
}
} )
You should be seeing an error in the console when you click the button.
It helps if you do some troubleshooting yourself and tell us what you see when you manually try to debug.
// console output
Uncaught TypeError: alert is not a function
Uncaught TypeError: Invalid attempt to destructure non-iterable instance.Symbol.iterator method.
I will take another look at building the for loop as I did suspect this was part of the problem.
Yes. I like what you’re trying to do in that loop, but the syntax is off.
Also, think about your variable naming convention. Don’t you find it confusing to reference a #number element as input and an #output element as result? Or have a numeral object property for a numeral array? Or have a value object property for the numeral array and a value variable name for the #number value?
