Function not being called onclick

Question

This code is a converter program. It takes a number from the input than converts with HTML romanize function. The function works with extraction operation. Take a number then extract some way.

I check a functıon. Functıon hasn't any problem when I send a string number to function like romanize("1234"), it works clearly. But I can't send with input element. The connection is also controlled. All elements can be selected and send a variable.

convertNumberToRoman.onclick = romanize(inputNumber.value) code didn't work. When I hit the button nothing happens. I want to enter a number in the input and click the 'convert' button then converted roman numbers show HTML.

let inputNumber = document.querySelector("#inputNumber")
let convertNumberToRoman = document.querySelector("#convertNumberToRoman")
let displayRoman = document.querySelector(".displayRoman")
let div = document.createElement("div")

convertNumberToRoman.onclick = romanize(inputNumber.value)

function romanize(num) {
  if (parseInt(num)) {
    let digits = Number(num);
    let roman = "";
    while (digits >= 1000) {
      digits = digits - 1000;
      roman = roman + "M";
    }
    while (digits >= 900) {
      digits = digits - 900
      roman = roman + "CM"
    }
    while (digits >= 500) {
      digits = digits - 500
      roman = roman + "D"
    }
    while (digits >= 400) {
      digits = digits - 400
      roman = roman + "CD"
    }
    while (digits >= 100) {
      digits = digits - 100
      roman = roman + "C"
    }
    while (digits >= 90) {
      digits = digits - 90
      roman = roman + "XC"
    }
    while (digits >= 50) {
      digits = digits - 50
      roman = roman + "L"
    }
    while (digits >= 40) {
      digits = digits - 40
      roman = roman + "XL"
    }
    while (digits >= 10) {
      digits = digits - 10
      roman = roman + "X"
    }
    while (digits >= 9) {
      digits = digits - 9
      roman = roman + "IX"
    }
    while (digits >= 5) {
      digits = digits - 5
      roman = roman + "V"
    }
    while (digits >= 4) {
      digits = digits - 4
      roman = roman + "IV"
    }
    while (digits >= 1) {
      digits = digits - 1
      roman = roman + "I"
    }
    div.innerHTML = roman
    displayRoman.appendChild(div)
  }
}




  
    Roman Numeral Converter

Rory McCrossan · Accepted Answer

The issue is because you've hooked your event handler to the submit button. When this is clicked it submits the form and causes a page redirection.

To prevent this, hook your event handler to the submit event of the form instead. Then you can call preventDefault() to stop the form submitting, and also you can have the benefit of allowing users to press the return key in the input to trigger the function.

let inputNumber = document.querySelector("#inputNumber");
let displayRoman = document.querySelector(".displayRoman");
let div = document.createElement("div");

document.querySelector('#todo-form').addEventListener('submit', e => {
  e.preventDefault();
  romanize(inputNumber.value);
});

function romanize(num) {
  if (parseInt(num)) {
    let digits = Number(num);
    let roman = "";
    
    while (digits >= 1000) {
      digits = digits - 1000;
      roman = roman + "M";
    }
    while (digits >= 900) {
      digits = digits - 900;
      roman = roman + "CM";
    }
    while (digits >= 500) {
      digits = digits - 500;
      roman = roman + "D";
    }
    while (digits >= 400) {
      digits = digits - 400;
      roman = roman + "CD";
    }
    while (digits >= 100) {
      digits = digits - 100;
      roman = roman + "C";
    }
    while (digits >= 90) {
      digits = digits - 90
      roman = roman + "XC"
    }
    while (digits >= 50) {
      digits = digits - 50;
      roman = roman + "L";
    }
    while (digits >= 40) {
      digits = digits - 40;
      roman = roman + "XL";
    }
    while (digits >= 10) {
      digits = digits - 10;
      roman = roman + "X";
    }
    while (digits >= 9) {
      digits = digits - 9;
      roman = roman + "IX";
    }
    while (digits >= 5) {
      digits = digits - 5;
      roman = roman + "V";
    }
    while (digits >= 4) {
      digits = digits - 4;
      roman = roman + "IV";
    }
    while (digits >= 1) {
      digits = digits - 1;
      roman = roman + "I";
    }
    div.innerHTML = roman;
    displayRoman.appendChild(div);
  }
}




  
    Roman Numeral Converter

As an aside to the issue, note that your logic to Romanize the input value can be optimised. See this question for more details on that.

Function not being called onclick

Answers (1)

Related Questions