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

JavaScript
1

Tell us what’s happening:

Hey all,

I’ve figured out most of the code to return the roman numeral values that I want, but for some reason my code keeps returning “undefined”, though my console.log tests are returning the correct values.

Just wondering what I’m doing wrong? Feel like I’m 99% of the way done!

Much appreciated!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Roman Numeral Converter</title>
  </head>
  <body>
    <main>
      <h1>Roman Numeral Converter</h1>
      <form id="form" class="form">
        <fieldset>
          <label for="number">Enter a Number:</label><br />
          <input type="number" id="number" required />
          <button type="button" id="convert-btn">Convert</button>
        </fieldset>
      </form>
      <div id="output" class="output hidden"></div>
    </main>
    <script src="script.js"></script>
  </body>
</html>


/* file: script.js */
const input = document.getElementById("number");
const button = document.getElementById("convert-btn");
const output = document.getElementById("output")

button.addEventListener ("click", () => {
  const value = input.value
  if (value === "") {
    output.innerText = "Please enter a valid number"
  } else if (value < 0) {
    output.innerText = "Please enter a number greater than or equal to 1"
  } else if (value >= 4000) {
    output.innerText = "Please enter a number less than or equal to 3999"
  } else{
    romanNum()
  }
})


let romanArray = []

function romanNum (input) {
  while (input >= 1000) {
    input -= 1000
    romanArray.push("M")
  } while (input >= 900) {
    input -= 900
    romanArray.push("CM")
  } while (input >= 500) {
    input -= 500
    romanArray.push("D")
  } while (input >= 400) {
    input -= 400
    romanArray.push("CD")
  } while (input >= 100) {
    input -= 100
    romanArray.push("C")
  } while (input >= 90) {
    input -= 90
    romanArray.push("XC")
  } while (input >= 50) {
    input -= 50
    romanArray.push("L")
  } while (input >= 40) {
    input -= 40
    romanArray.push("XL")
  } while (input >= 10) {
    input -= 10
    romanArray.push("X")
  } while (input >= 9) {
    input -= 9
    romanArray.push("IX")
  } while (input >= 5) {
    input -= 5
    romanArray.push("V")
  } while (input >= 4) {
    input -= 4
    romanArray.push("IV")
  } while (input >= 1) {
    input -= 1
    romanArray.push("I")
  } 
  output.innerText = romanArray.join("")
}


console.log(romanNum(9))
console.log(romanArray)
console.log(output.innerText)

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Challenge Information:

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

2

are you able to add a console.log(romanArray) above this line to see what is happening?

3

It returned the same value/array as the console.log(romanArray) outside of the function body. I also increased the input to ‘99’ and ‘999’ to see if it was an issue with the .join() method and the array having one value, but it still returned undefined :frowning:

image
image1007×514 29.5 KB

4

well romanNum(9) will return undefined because you don’t have a return statement.
Does it affect the test?

5
  1. Thank you for your time and patience with me
  2. Adding ‘return’ before ‘output.innerText = romanArray.join(“”)’ fixes the undefined issue! But for some reason, the preview of the program still does not return anything when I input any valid numbers and click “Convert”, though my 'console.log’s will return the correct ‘output.innerText’ in the program.
  3. Why is it that in my ‘button.addEventListener’ function, the program will return the string I want without requiring “return” before ‘output.innerText’ but it seems to be required for my ‘romanNum’ function?

Thank you!

6

bump, still haven’t figured this out haha

8

Hi there,

First of all, your romanNum function take one argument.
So you have to provide a argument here, which is value.

Secondly, we have to reset the romanArray to empty array every time the function romanNum run. So you have to move this line inside the romanNum function definition.

2 Likes
9

Such simple bugs that I couldn’t figure out, thank you so much!! :smiley:

1 Like