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

I have gotten through step 6 on the user stories and they have passed. I also created a function to convert to the roman numerals which works on the console log. I am having a problem getting my process for converting to work on the preview. When I put a number in and click convert, nothing happens. I am not sure what to try next.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="scriptsheet" href="./script.js" />
<title>Roman Numeral Converter</title>
  </head>
  <body>
<label for="number">Enter Numbers: </label>
<input id="number"></input>
<button id="convert-btn">convert</button>
<div id="output"></div>
<script src="./script.js"></script>
  </body>
</html>
/* file: styles.css */

/* file: script.js */
let number = document.getElementById("number");
let btn = document.getElementById("convert-btn");
let result = document.getElementById("output");


btn.addEventListener("click", numberInput);
function numberInput(){
  
if(number.value === ''){
  result.textContent="Please enter a valid number";
}
else if (number.value < 1){
  result.textContent="Please enter a number greater than or equal to 1";
}
else if (number.value >=4000){
  result.textContent="Please enter a number less than or equal to 3999";
}
 if (number.value > 4000) {
   result = convertToRoman();
 }
};


function convertToRoman(num) {
let answer = "";
  let pairs = {
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,
  }

    let keys = Object.keys(pairs);
    console.log(keys);
    while (num > 0) {
    let letter = "I"
    for (let i = 0; i < keys.length; i++) {
if (num >= pairs[keys[i]]) {
   letter = keys[i];
  break;
}
    }
    answer += letter;
   num = num - pairs[letter];
  }

  return answer;
}


console.log(convertToRoman(9));

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

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

This immediately stands out to me.

I changed it to number.value < 4000 but ended up taking it out because it says convertToRoman is undefined

Hmm, I changed it to number.value < 4000 and I am not getting that error. It seems to be calling the convertToRoman function for me.

it’s still not working. is it a syntax error? I am thinking there is an issue with the way I called the function

Is there a chance you’ve made changes to the JS you pasted above? Because I am not getting syntax errors with the code above. Maybe paste your most current JS in here again? Please use the following method to do that so that.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

let number = document.getElementById("number");
let btn = document.getElementById("convert-btn");
let result = document.getElementById("output");


btn.addEventListener("click", numberInput);
function numberInput(){
  
if(number.value === ''){
  result.textContent="Please enter a valid number";
}
else if (number.value < 1){
  result.textContent="Please enter a number greater than or equal to 1";
}
else if (number.value >=4000){
  result.textContent="Please enter a number less than or equal to 3999";
}
 else if (number.value < 4000) {
   let result = convertToRoman();
 }
 
};


function convertToRoman(num) {
let answer = "";
  let pairs = {
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,
  }

    let keys = Object.keys(pairs);
    console.log(keys);
    while (num > 0) {
    let letter = "I"
    for (let i = 0; i < keys.length; i++) {
if (num >= pairs[keys[i]]) {
   letter = keys[i];
  break;
}
    }
    answer += letter;
   num = num - pairs[letter];
  }

  return answer;
}


console.log(convertToRoman(8));

I just tested it and I am not getting a syntax error. Your code is working as written for me. It’s just not quite written correctly :slightly_smiling_face:

But if you are getting a syntax error then please paste it in here. Otherwise, I suggest you add the following right before the return statement in convertToRoman:

console.log('answer: ', answer);

Thank you for the help! I still can’t get the conversions to appear on screen. I’ll keep working!

Look at this part of your code:

if(number.value === ''){
  result.textContent="Please enter a valid number";
}
else if (number.value < 1){
  result.textContent="Please enter a number greater than or equal to 1";
}
else if (number.value >=4000){
  result.textContent="Please enter a number less than or equal to 3999";
}
 else if (number.value < 4000) {
   let result = convertToRoman();
 }

In the first three you are setting textContent to a string. Why aren’t you doing that for the last one? Doesn’t convertToRoman return a string?

this is what i have changed and it gets the text to show up but I am still struggling on properly calling the function

if (number.value < 4000) {
   result.textContent = "Roman Numeral:" + convertToRoman("");

You are passing an empty string to convertToRoman. Don’t you want to convert the number typed into the input into a Roman numeral?

using this code got everything to show on screen but does not allow me to pass the project

else if (number.value < 4000) {
   result.textContent = "Roman Numeral:" + convertToRoman(number.value);

Make sure you are only adding what the tests are asking for in the #output element.

2 Likes

got it! Thank you so much for all of your help!

2 Likes

Can you provide me full code because i tried so hard but i didnt get the solution upto step 6 i done it well but after that i cant get the solution can provide the full code