Tell us what’s happening:
i need help with my roman numerals converter. i cant figure out the issue. the code doesnt accept the input and update the result element. only the first three of the user stories are accepted. I have added console logs to check and have verified in the console tab of the developer tools that they are logged.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<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 class="container">
<form>
<label for="number" class="input-label">Enter a number</label>
<!-- Add 'name' and 'id' attributes to the input element -->
<input class="number" id="number" name="number" type="number" required>
<button type="button" class="convert-btn" id="convert-btn">Convert</button>
</form>
</div>
<div class="result-output">
<p id="output">Result</p>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
document.addEventListener('DOMContentLoaded', (event) => {
console.log("DOM fully loaded and parsed");
// Your existing code goes here:
const input = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("output");
// Check if the elements are selected correctly
console.log(input); // Should log the input element, not null
console.log(convertBtn); // Should log the button element
console.log(result); // Should log the result element
// Add event listener to the button
convertBtn.addEventListener("click", checkUserInput);
// Function to convert a number to Roman numerals
function convertRomanNumerals(number) {
const romanNumerals = [
{ 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 finalResult = "";
// Convert the number to Roman numerals
romanNumerals.forEach(item => {
while (number >= item.value) {
finalResult += item.numeral;
number -= item.value;
}
});
return finalResult;
}
// Function to validate input and handle conversion
const checkUserInput = () => {
console.log("button clicked");
const numberValue = parseInt(input.value);
// Case: Check if input is empty or not a valid number
if (!input.value || isNaN(numberValue)) {
return result.innerText = "Please enter a valid number";
}
// Case: Check if input is less than 1
if (numberValue < 1) {
return result.innerText = "Please enter a number greater than or equal to 1";
}
// Case: Check if input is greater than 3999
if (numberValue > 3999) {
return result.innerText = "Please enter a number less than or equal to 3999";
}
// Convert number to Roman numerals
const romanNumeral = convertRomanNumerals(numberValue);
// Display the Roman numeral result
result.innerText = romanNumeral;
};
});
/* file: styles.css */
h1 {display: flex; justify-content: center;}
label {display: block; text-align: center; font-size: 20px;}
input {display: block; text-align: center; margin-left: 100px; margin-top: 15px;}
#convert-btn {display: block; margin-left: 100px; margin-top: 15px;}
#output {display: block; margin-top: 15px; font-size: 20px;
background-color: rgb(125, 125, 175); display: flex; justify-content: center;}
.container {background-color: rgb(255, 125, 113);}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter
