Script not working onclick

JavaScript
1

Hello,

I’m trying to turn my Roman Numeral Converter from the JavaScript certificate into an actual tool with a user interface. I took a break from the regular curriculum and thought this might be a good distraction. I’ve run into a road block though.

I can get my button to update the <p> tags with the numbers entered into the input field, but I can’t seem to get it to display the results of my converter function.

Here is what I’m looking at:

My JavaScript:

function setUserInput () {
  var x = document.getElementById("numberToConvert").value;
  var w = convertToRoman(x);
  document.getElementById("roman-numerals").innerHTML = w;
}

If I set the second documents.getElementById to var x then it updates every time with the numbers I type into the input field.

My HTML:

  <div id="converter">
    <div id="results">
      <p id="roman-numerals"><p>
    </div>
    
    <form>
    <input id="numberToConvert" type="number" value="enter your number">
    <input type="button" value="Convert" onclick="setUserInput()">
    </form>
  </div>

I know the function convertToRoman() works because I passed that challenge in the JavaScript certification and if I console.log(convertToRoman(10)) it returns X.

This is the first time I’ve tried to combine my HTML/CSS with my JavaScript.

Here is a link to the codepen if that will help.

3

Oh you’re right… I had just tested it with the number 10. I’m now realizing that it works from anything above 10, but nothing below 10. However, when I console.log the function to convert numbers 10 and below it logs the correct roman numeral. Why would it only display numbers 11 and greater when I click the button?

4

It is because of the value type of input received by your romanNumberalFinder function for the numbers 1 through 10. Check it out for yourself.

1 Like
5

Ah it was a number, but my function was written for a string. Thank you :slight_smile: