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

JavaScript
1

Tell us what’s happening:

I don’t understand what the issue is

The function is working great on close but when I click convert it doesn’t do anything

It asks for ‘output’ to have string element as the result when button is clicked so I added eventListener with String() so result can show like that

What am I doing wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="widt=device-width initial-scale=1.0" />
      
      </head>
      <body>
        
        <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 */
const convertBtn = document.getElementById("convert-btn")
const numberInput = document.getElementById("number")
const output = document.getElementById("output")

convertBtn.addEventListener('click', () => {
  if(numberInput.value === "") {
    output.innerHTML = "Please enter a valid number"
  } else if (numberInput.value === "-1") {
    output.innerHTML = "Please enter a number greater than or equal to 1"
  } else if (numberInput.value >= "4000") {
    output.innerHTML = "Please enter a number less than or equal to 3999"
  }
});

function convertToRoman(num) {
  let romanNumeral = '';
  let romanList = [
    ["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]
  ]

  for (let i = 0; i < romanList.length; i++) {
    while (num >= romanList[i][1]) {
      romanNumeral += romanList[i][0]
      num -= romanList[i][1]
    }
  }
  return romanNumeral
   
};

 convertBtn.addEventListener('click', () => {output.innerHTML = String(romanNumeral)}

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

1 Like
2

you have a syntax error here, missing a ) at the end

I would like to ask you about your logic. What should happen when the button is clicked?

3

Thank you. I am trying to figure ’ When the #number element contains the number 3999and the #convert-btn element is clicked, the #outputelement should contain the text "MMMCMXCIX"

So the function already works but nothing happens in the function when I click ‘convert’ button on the program

I also tried

return output.innerHTML = String(romanNumeral)

within the function as well because the assignment asks to return everything in ‘string’ format

I am not sure what am I doing wrong because when I use

convertToRoman() function on terminal it shows right values

4

when is this function executed?

1 Like
5

When the button is clicked

I also added in the addEventListener as else {} and called the function there but still did not work

convertBtn.addEventListener(‘click’, () => {
if(numberInput.value === “”) {
output.innerHTML = “Please enter a valid number”
} else if (numberInput.value === “-1”) {
output.innerHTML = “Please enter a number greater than or equal to 1”
} else if (numberInput.value >= “4000”) {
output.innerHTML = “Please enter a number less than or equal to 3999”
} else {
return convertToRoman()
}

6

can you show me the code that determines this?

7

This is the whole code :slight_smile:

const convertBtn = document.getElementById(“convert-btn”)
const numberInput = document.getElementById(“number”)
const output = document.getElementById(“output”)

function convertToRoman(num) {
let romanNumeral = ‘’;
let romanList = [
[“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]
]

for (let i = 0; i < romanList.length; i++) {
while (num >= romanList[i][1]) {
romanNumeral += romanList[i][0]
num -= romanList[i][1]
}
}
return romanNumeral;
};

convertBtn.addEventListener(‘click’, () => {
if(numberInput.value === “”) {
output.innerHTML = “Please enter a valid number”
} else if (numberInput.value === “-1”) {
output.innerHTML = “Please enter a number greater than or equal to 1”
} else if (numberInput.value >= “4000”) {
output.innerHTML = “Please enter a number less than or equal to 3999”
} else {
** return convertToRoman()**
** }** // I called the function here when all other elements are checked it should call the function. Am I wrong?

});

console.log(convertToRoman(16));

8

you should really format your code correctly

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

anyway

you have a call to convertToRoman, but it seems it’s missing something. What value goes to num here?

also, what are you doing with the output of the function?

9

Sorry about that.

Ah now I see. numberInput.value will be in the code and with the output, we should do output.innerHTML =

return output.innerHTML = convertToRoman(numberInput.value)
  }

but it now gives error for number 9 and 649 and everything else seems okay

10

post your latest code, and let’s see

11 
const convertBtn = document.getElementById("convert-btn")
const numberInput = document.getElementById("number")
const output = document.getElementById("output")

function convertToRoman(num) {
  let romanNumeral = '';
  let romanList = [
    ["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]
  ]

  for (let i = 0; i < romanList.length; i++) {
    while (num >= romanList[i][1]) {
      romanNumeral += romanList[i][0]
      num -= romanList[i][1]
    }
  }
  return romanNumeral;
};

convertBtn.addEventListener('click', () => {
  if(numberInput.value === "") {
    output.innerHTML = "Please enter a valid number"
  } else if (numberInput.value === "-1") {
    output.innerHTML = "Please enter a number greater than or equal to 1"
  } else if (numberInput.value >= "4000") {
    output.innerHTML = "Please enter a number less than or equal to 3999"
  } else {
    return output.innerHTML = convertToRoman(numberInput.value)
  }
  
});

console.log(convertToRoman(16));

Just as a context it gives ‘Please enter a number less than or equal to 3999’ when I type 9 or 649 on. But it gives correct values for everything else. For some reason it thinks if it starts with number 9 or ends with 9 it is greater than 4000 ?

12

oh
image

you need to compare numbers not strings

13

That was silly. Thank you so much for your time.

I thought -1 was also a number but it did not recognise so I put it in “”, I did the same for 4000 it seems like

14

well, here you have === -1 but does your code work for values like 0, -245, etc?

15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.