Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

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

Welcome to the forum @mahamadou.magassa20

The syntax for the event listener is not correct.

Happy coding

thanks, I really can’t get the right syntax can you give me some tips ?

I tried this too :

convertBtn.addEventListener(“click”, function() {rightInput(arabic);}); still nothing ://

and in that case what would the value of arabic be?

arabic = number.value

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(arabic) {

romanXArabic.forEach(  (arr) => { while (arabic >= arr[1])
 
   { roman.push(arr[0])
     arabic -= arr[1] }

 }
)
output.innerText = roman.join("")

                             }


let outputMsg = '';


function rightInput(arabic) {


if (!arabic) {

  output.textContent = "Please enter a valid number";
 // output.textContent = outputMsg;
  
} else if (arabic < 1) {
  output.textContent = "Please enter a number greater than or equal to 1";
//output.textContent = outputMsg;
} else if (arabic > 3999) {
  output.textContent = "Please enter a number less than or equal to 3999";
//output.textContent = outputMsg
} else {
   convertInto(arabic);
   output.textContent = roman.join("")
   ;
   return;
}

}


convertBtn.addEventListener("click", (arabic) => {rightInput()})


<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" placeholder="num" >
    <button id="convert-btn" type="button" >convert</button>

  </div>
  <div id="output"></div>







here the button is only showcasing the first if condition no matter what data I put in, can someone help please ?

Hi @mahamadou.magassa20

Try console logging the arabic variable.
Also, in the html you posted recently there is no script element.

Happy coding

</body>
<script src="script.js"></script>
</html>

is below I just forgot

Hi ! thanks a lot but can you explain I don’t really understand what you mean by logging the arabic variable, I tried logging arabic into console.log but nothing happened then.
tans

yes, console.log(arabic). You can also do console.log({arabic}) so you get an object where the key is “arabic” and the value is the value of the property, so you can be sure you are looking at the right thing

1 Like

That means the the variable does not have a value. It is in the global scope. Maybe retrieve it when someone presses a button.

1 Like
  1. You have to evaluate the .value property every time an input is made. Not just one time when the code initially runs. You usually do that inside the event handler.

  2. rightInput is not passed an argument, so the arabic parameter is always undefined. Also, if you name a function parameter the same as another variable in an outer scope, the parameter is not the same variable. You have two arabic variables, one is a top-level variable that only get its value on the initial run, and one is the rightInput parameter which is never assigned a value because the function is never passed an argument.

1 Like

thank you so much !!!