Tell us what’s happening:
Hi everyone !
Currently completing my Roman numeral challenge but I can’t get my submit button to work when I use the addEventlistener method, the console.log way works just fine and shows that my code is working but I can’t get the button to be tied to the function, can someone please help ? Thanks !
Your code so far
<!-- file: index.html -->
<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>
<h3> Test FCC JS no2<h3>
<h1> ROMAN NUMERAL CONVERTER </h1>
<div>
<h4> Enter a Number </h4>
<input id="number" type="number">
<button id="convert-btn" type="submit" >convert</button>
</div>
<div id="output"></div>
</body>
<script src="script.js"></script>
</html>
/* file: script.js */
const number = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");
const romanXArabic = [
['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]
];
const arabic = number.value;
const roman = [];
function convertInto(number) {
romanXArabic.forEach(
(arr) => {
while (number >= arr[1])
{
roman.push(arr[0])
number -= arr[1]
}
}
)
output.innerText = roman.join("")
}
function rightInput(arabic) {
let outputMsg = '';
if (!arabic) {
outputMsg = "Please enter a valid number";
output.textContent = outputMsg
} else if (arabic < 1) {
outputMsg = "Please enter a number greater than or equal to 1";
output.textContent = outputMsg
} else if (arabic > 3999) {
outputMsg = "Please enter a number less than or equal to 3999";
output.textContent = outputMsg
} else {
convertInto(number);
outputMsg = roman.join("");
output.textContent = outputMsg;
}
}
convertBtn.addEventListener("click", rightInput)
//console.log(rightInput(12))
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Safari/605.1.15
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter