Function not being called onclick-CodePudding

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)
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
  <div >
    <div >Roman Numeral Converter</div>
    <div >
      <form id="todo-form" name="form">
        <div >
          <div >
            <input  type="text" name="" id="inputNumber" placeholder="Enter a Number">
            <button type="submit"  id="convertNumberToRoman">Convert</button>
            <div ></div>
          </div>
        </div>
      </form>
      <hr>
    </div>
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<script src="romanNumerals.js"></script>

CodePudding user response：

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);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
  <div >
    <div >Roman Numeral Converter</div>
    <div >
      <form id="todo-form" name="form">
        <div >
          <div >
            <input  type="text" name="" id="inputNumber" placeholder="Enter a Number">
            <button type="submit"  id="convertNumberToRoman">Convert</button>
            <div ></div>
          </div>
        </div>
      </form>
      <hr>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
    <script src="romanNumerals.js"></script>

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.