ROMAN NUMERAL CONVERTER

JavaScript
1

I did the roman numeral converter project and it works on freeCodeCamp but when I use it in visual studio’s it doesn’t work correctly. Any help would be appreciated. Also when I test this on other sites it gives me this error code “Cannot read properties of null (reading ‘addEventListener’)”
The main problem I have in visual studio’s when running this code is when I put in numbers to convert a roman numeral the numbers and results disappear quickly. On freeCodeCamp they stay on the screen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" initial-scale="1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Roman Numeral Converter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
    <body>
      <main>
      <h1>ROMAN NUMERAL CONVERTER</h1>
   <form class="form">     
       <fieldset>
         <label class="label">Enter a number:</label> 
         <input class="number-input" type="number" id="number"></input>
         <button class="convert" id="convert-btn">Convert</button>
       </fieldset>
      </form>
     <div id="output"></div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

** end of undefined **

** start of undefined **

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: grey;
  min-height: 100vh;
  flex-direction: column;
  font-size: 18px;
  display: flex;
  padding: 50px 20px;
}

h1 {
  text-align: center;
  margin: 20px auto;
  max-width: 350px;
}

label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-weight: bold;
}

button {
  margin: 10px auto;
  cursor: pointer;
  font-size: 23px;
  padding: 10px 10px;
  border: 3px solid #feac32;
  text-decoration: none;
  background-image: linear-gradient(#fecc4c, #ffac33);
}

.number-input {
  display: block;
  width: 100%;
  height: 60px;
  margin: 10px 0;
  font-size: 2.5rem;
}

fieldset {
  height: 100%;
  padding: 25px;
  margin: 10px 20px;
  border: 0 none;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

form {
  margin: auto 25px;
  padding: 15px auto;
  border: 3px solid;
  text-align: center;
  width: 90%;
  max-width: 500px;
}

#output {
  border: 3px solid ;
  font-size: 2.5rem;
  width: 90%;
  max-width: 500px;
  min-height: 55px;
  margin-top: 25px;
  padding: 15px;
  overflow-wrap: break-word;
  text-align: center;
}

** end of undefined **

** start of undefined **

const input = document.getElementById("number")
const convertBtn = document.getElementById("convert-btn")
const output = document.getElementById("output")
let numeralRoman = ""
const romanNumeral = [
  {
    input: 1000,
    numeral: "M",
  },
  {
    input: 900,
    numeral: "CM",
  },
  {
    input: 500,
    numeral: "D",
  },
  {
    input: 400,
    numeral: "CD",
  },
  {
    input: 100,
    numeral: "C",
  },
  {
    input: 90,
    numeral: "XC",
  },
  {
    input: 50,
    numeral: "L"
  },
  {
    input: 40,
    numeral: "XL",
  },
  {
    input: 10,
    numeral: "X",
  },
  {
    input: 9,
    numeral: "IX",
  },
  {
    input: 5,
    numeral: "V",
  },
  {
    input: 4,
    numeral: "IV",
  },
  {
    input: 1,
    numeral: "I",
  },
];


convertBtn.addEventListener('click', () => {

  if (input.value === "") {
    output.innerText = "Please enter a valid number"
    return
  } else if (input.value < 0) {
    output.innerText = "Please enter a number greater than or equal to 1"
    return
  } else if (input.value > 3999) {
    output.innerText = "Please enter a number less than or equal to 3999"
   return
  } 
     toRoman(input.value);
  output.innerText = numeralRoman;
})

const toRoman = (input) => {
  let result = "";
  let remaining = input;


  for (const { input, numeral } of romanNumeral) {
    while (remaining >= input) {
      result += numeral;
      remaining -= input;
    }
  }
numeralRoman = result;
};
1 Like
2

Hello,

The reason the result disappears quickly is because the page reloads after the form submission
You wrapped you convert button within a form element therefore it acts a the submission button of the form, to fix this just invoke the preventDefault method of the event object to cancel the default behavior of submission & page reloading

convertBtn.addEventListener('click', (e) => {
e.preventDefault();
3

It worked. Thank you for your help. Much appreciated.

1 Like