Roman numeral converter for html

1

I just started learing javascript and html. I cant figure out why this wont work right, thanks.

<!DOCTYPE html>
<html>
<body>
<script>

function romanNumeralVersion(decimalNumber) {

var valueToReturn = document.getElementById("outputnumber").value;    

    if (decimalNumber == 1) {
        document.getElementById("outputnumber").value = 'I';
    } else if (decimalNumber == 2) {
        document.getElementById("outputnumber").value  = 'II';
    } else if (decimalNumber == 3) {
        document.getElementById("outputnumber").value  = 'III';
    } else if (decimalNumber == 4) {
        document.getElementById("outputnumber").value  = 'IV';
    } else if (decimalNumber == 5) {
        document.getElementById("outputnumber").value  = 'V';
    } else if (decimalNumber == 6) {
        document.getElementById("outputnumber").value  = 'VI';
    } else if (decimalNumber == 7) {
        document.getElementById("outputnumber").value  = 'VII';
    } else if (decimalNumber == 8) {
        document.getElementById("outputnumber").value  = 'VIII';
    } else if (decimalNumber == 9) {
        document.getElementById("outputnumber").value  = 'IX';
    } else if (decimalNumber == 10) {
        document.getElementById("outputnumber").value  = 'X';
    } else {
        document.getElementById("outputnumber").value  = 'an invalid number (1-10).';
    }
    return valueToReturn;

}

decimalNumber = parseInt(decimalNumber);
var decimalNumber = document.getElementById("inputnumber").value = "";
document.getElementById("outputnumber").value = "";

var romanNumeral = romanNumeralVersion(decimalNumber);
</script>
<h1>Welcome to the Roman Numeral Converter</h1>
<p>Please enter a number (1-10) you would like to convert to a Roman Numeral: <input type="text" id="inputnumber"></p>
<p>____________________________________________________________________________________</p>
<p>The equivalent Roman Numeral is: <input type="text" id="outputnumber"></p>
<p><input type="button"  id="calculate"  value="CONVERT" onclick=romanNumeralVersion(decimalNumber)></p>
</body>
</html>
2

I’ve edited your post for readability. 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.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

I’ve modified your code a bit:

<!DOCTYPE html>
<html>
<body>

  <!-- WHEN PLACING A SCRIPT TAG BEFORE THE BODY, IT'S RECOMMENDED TO USE DEFER -->
<script defer>

// YOUR FUNCTION DOESN'T NEED TO ACCEPT PARAMETERS
function romanNumeralVersion() {

// ONCE THE BUTTON IS CLICKED, GRAB THE INPUT FROM THE USER AND CONVERT IT INTO A NUMBER WITH PARSEINT
  var decimalNumber = parseInt(document.getElementById("inputnumber").value);
  var valueToReturn = document.getElementById("outputnumber").value;    

// THE PART WORKS JUST FINE
    if (decimalNumber == 1) {
        document.getElementById("outputnumber").value = 'I';
    } else if (decimalNumber == 2) {
        document.getElementById("outputnumber").value  = 'II';
    } else if (decimalNumber == 3) {
        document.getElementById("outputnumber").value  = 'III';
    } else if (decimalNumber == 4) {
        document.getElementById("outputnumber").value  = 'IV';
    } else if (decimalNumber == 5) {
        document.getElementById("outputnumber").value  = 'V';
    } else if (decimalNumber == 6) {
        document.getElementById("outputnumber").value  = 'VI';
    } else if (decimalNumber == 7) {
        document.getElementById("outputnumber").value  = 'VII';
    } else if (decimalNumber == 8) {
        document.getElementById("outputnumber").value  = 'VIII';
    } else if (decimalNumber == 9) {
        document.getElementById("outputnumber").value  = 'IX';
    } else if (decimalNumber == 10) {
        document.getElementById("outputnumber").value  = 'X';
    } else {
        document.getElementById("outputnumber").value  = 'an invalid number (1-10).';
    }

// RETURN NOT NECESSARY SINCE YOU ARE SETTING THE VALUE OF THE SECOND INPUT FROM WITHIN THE FUNCTION AND AREN'T REALLY RETURNING ANYTHING
    // return valueToReturn;

}


// THE REST OF THIS CODE IS NOT NECESSARY
// decimalNumber = parseInt(decimalNumber);
// var decimalNumber = document.getElementById("inputnumber").value = "";
// document.getElementById("outputnumber").value = "";

// var romanNumeral = romanNumeralVersion(decimalNumber);
</script>
  
  <h1>Welcome to the Roman Numeral Converter</h1>
<p>Please enter a number (1-10) you would like to convert to a Roman Numeral: <input type="text" id="inputnumber"></p>
<hr>
<p>The equivalent Roman Numeral is: <input type="text" id="outputnumber"></p>
<p><input type="button"  id="calculate"  value="CONVERT" onclick="romanNumeralVersion()"></p><!-- ONCLICK MODIFIED -->
</body>
</html>

If you need clarification on anything, just let me know, I’m more than willing to break it down even further if necessary

Good luck!

4

Thank you so much! I appreciate you taking your time to help me with this