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

JavaScript
1

Tell us what’s happening:

The tests pass for anything like “9”, “10”, “20”, but not the four specific number tests like 1023, etc. Please help me understand what has gone wrong.

Initially I thought it the issue lied in concatenating the array into a string, but if that was the problem shouldn’t it not work for the test of the number 9?

Your code so far

<!-- file: index.html -->


/* file: script.js */

/* ---------------
DECLARING MY VARIABLES
--------------- */

const userInput = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");

const restartBtn = document.getElementById("restart-btn");
const outputMsg = document.getElementById("output");
const output = document.getElementById("output-box");

const romanToNum = {
  '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 roman = [];

/* ---------------
CHECKING USER INPUT
--------------- */

// first I need to check if the user input is legitimate numbers

const checkInput = () => {
  convertBtn.classList.add("hidden");

  let userInt = parseInt(userInput.value, 10);

  if (userInt === "" || !userInt) {
    output.classList.toggle('hidden')
    outputMsg.innerHTML = 
    '<p>Please enter a valid number</p>'

// "Please enter a number greater than or equal to 1"
// "Please enter a number less than or equal to 3999"

  } else if (userInt < 1 || userInt > 3999) {
    output.classList.toggle('hidden')
    if (userInt < 1) {
      outputMsg.innerHTML = 
    '<p>Please enter a number greater than or equal to 1</p>'
    } else if (userInt > 3999) {
      outputMsg.innerHTML = 
    '<p>Please enter a number less than or equal to 3999</p>'
    }    
  
  } else {
    output.classList.toggle('hidden')
    
    const convert = (x) => {
      for (let key in romanToNum) {
      let remainder = x - romanToNum[key];  
        if (romanToNum[key] > x) {
          continue
        } else if (remainder === 0) {
          roman.push(key);
          let romanStr = roman.join('');
          outputMsg.innerHTML = `<p id="output"> ${romanStr} </p>`;
          return romanStr;
        } else if (remainder > 0) {
          roman.push(key);
          convert(remainder);
          let romanStr = roman.join('');
          outputMsg.innerHTML = `<p id="output"> ${romanStr} </p>`;
          return romanStr;
        }
      }      
    };
    convert(userInt);
  };
}

convertBtn.addEventListener("click", checkInput);

restartBtn.addEventListener("click", restart);

function restart() {
  userInput.value = "";
  roman = [];
  output.classList.toggle("hidden");
  convertBtn.classList.remove("hidden");
}



/* 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/131.0.0.0 Safari/537.36

Challenge Information:

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

2

Welcome to the forum @erinable

You may have a syntax error:

Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)

Please also post the html file.

Happy coding

3

Here is the 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” href=styles.css>
     <title>Roman Numeral Converter</title>
</head>

<body>
     <h1>Roman Numeral Converter</h1>
     <p>
        <form id="form" class="form">
          <fieldset>
            <label for="number">Enter a number:</label>
            <br>
            <input type="number" id="number" required>
            <br>
            <button type="button" id="convert-btn">Convert</button> 
          </fieldset>
        </form> 
     </p>

    <div id="output-box" class="output hidden">
      <p id="output"></p>
      <br>
      <button type="button" id="restart-btn">Ok</button>
    </div>
    
  <script src="script.js"></script>
</body>

</html>

I thought I’d fixed the original syntax errors with the eventListeners. I’ll check that again.

4

Move the array declaration into the handler function. You don’t want to just keep adding to the array. Besides, most fCC tests do not work with top-level variables that it can’t reset between runs.

5

Hey thank you, that worked!

Could you elaborate more on why this works better than my reset function and reset button clearing out the array instead?

6

Two things

  1. the tests don’t know about your reset button

  2. it’s a generally a best practice to avoid making functions mutate global variables, as it makes the logic harder to follow and it’s easy to find yourself in an unanticipated state

1 Like
7

thank you! I can understand that.