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

JavaScript
1

Tell us what’s happening:

I don’t understand why the text content of my div element is not updating.

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" href="styles.css">
    <title>Roman Numeral Converter</title>
  </head>
  <body>
    <h2>Roman Numeral Converter(1 - 3999)</h2>
    <label>Input a number: </label>
    <input id="number" type="number" required></input>
    <br>
    <button id="convert-btn">Convert</button>
    <div id="output"></div>
  </body>
  <script src="script.js"></script>
</html>

/* file: styles.css */


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

//roman numerals
const zero = ""
const one = "I";
const two = "II";
const three = "III";
const four = "IV";
const five = "V";
const six = "VI";
const seven = "VII";
const eight = "VIII";
const nine = "IX";
const ten = "X";
const fifty = "L";
const hundred = "C";
const fivehundred = "D";
const thousand = "M";

//gives alerts based on certain conditions
function alertConvert() {
  if (input.value === "") {
    divOutput.textContent = "Please enter a valid number";
    //alert("Please enter a valid number");
  } else if (input.value < 1) {
    divOutput.textContent = "Please enter a number greater than or equal to 1";
    //alert("Please enter a number greater than or equal to 1");
  } else if (input.value > 3999) {
    divOutput.textContent = "Please enter a number less than or equal to 3999";
    //alert("Please enter a number less than or equal to 3999");
  }
}

//the function that will do the conversion
function romanConvert() {

  //used to split the number into an array
  let stringArr = [];
  //array for roman numerals to be added
  let romanArr = [];
  
  //splitting number into an array
  stringArr = number.value.split("");
  console.log(stringArr);

//saving specific digit into variable
  var single = parseInt(stringArr[stringArr.length - 1]);
  var double = parseInt(stringArr[stringArr.length - 2]);
  var triple = parseInt(stringArr[stringArr.length - 3]);
  var quad =  parseInt(stringArr[stringArr.length - 4]);
  console.log(single, double, triple, quad);

  //roman numeral for first digit
  if (single === 1) {
    romanArr.unshift(one);
  } else if (single === 2) {
    romanArr.unshift(two);
  } else if (single === 3) {
    romanArr.unshift(three);
  } else if (single === 4) {
    romanArr.unshift(four);
  } else if (single === 5) {
    romanArr.unshift(five);
  } else if (single === 6) {
    romanArr.unshift(six);
  } else if (single === 7) {
    romanArr.unshift(seven);
  } else if (single === 8) {
    romanArr.unshift(eight);
  } else if (single === 9) {
    romanArr.unshift(nine);
  } else romanArr.unshift(zero);
  console.log(romanArr);

  //roman numeral for second digit
  if (double === 1) {
    romanArr.unshift(ten);
  } else if (double === 2) {
    romanArr.unshift(ten, ten);
  } else if (double === 3) {
    romanArr.unshift(ten, ten, ten);
  } else if (double === 4) {
    romanArr.unshift(ten, fifty);
  } else if (double === 5) {
    romanArr.unshift(fifty);
  } else if (double === 6) {
    romanArr.unshift(fifty, ten);
  } else if (double === 7) {
    romanArr.unshift(fifty, ten, ten);
  } else if (double === 8) {
    romanArr.unshift(fifty, ten, ten, ten);
  } else if (double === 9) {
    romanArr.unshift(ten, hundred);
  } else romanArr.unshift(zero);
  console.log(romanArr);

  //roman numeral for third digit
  if (triple === 1) {
    romanArr.unshift(hundred);
  } else if (triple === 2) {
    romanArr.unshift(hundred, hundred);
  } else if (triple === 3) {
    romanArr.unshift(hundred, hundred, hundred);
  } else if (triple === 4) {
    romanArr.unshift(hundred, fivehundred);
  } else if (triple === 5) {
    romanArr.unshift(fivehundred);
  } else if (triple === 6) {
    romanArr.unshift(fivehundred, hundred);
  } else if (triple === 7) {
    romanArr.unshift(fivehundred, hundred, hundred);
  } else if (triple === 8) {
    romanArr.unshift(fivehundred, hundred, hundred, hundred);
  } else if (triple === 9) {
    romanArr.unshift(hundred, thousand);
  } else romanArr.unshift(zero);
  console.log(romanArr);

  //roman numeral for fourth digit
  if (quad === 1) {
    romanArr.unshift(thousand);
  } else if (quad === 2) {
    romanArr.unshift(thousand, thousand);
  } else if (quad === 3) {
    romanArr.unshift(thousand, thousand, thousand);
  } else romanArr.unshift(zero);
  console.log(romanArr);

  //outputting array with no spaces
  var filteredArr = romanArr.join("");
  divOutput.textContent = filteredArr;
}

convert.addEventListener("click", alertConvert);
convert.addEventListener("click", romanConvert);

Your browser information:

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

Challenge Information:

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

2

you should have only one event listener for the convert button. I suggest you make your callback () => {alertConvert(); romanConvert();} so you have only one event listener

Also, this works:

but it’s overwritten byt this:

so actually my suggestion becomes that you should have an else in the if...else if... chain inside alertConvert, that converts when the input is valid

3

I removed the alertConvert function all together and put that functions code into the romanConvert. That worked for me. Thank you for your input.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.