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

<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 class="container">
  <div class="card row">
    <div class="card-header">Roman Numeral Converter</div>
    <div class="card-body">
      <form id="todo-form" name="form">
        <div class="form-row">
          <div class="form-group col-md-6">
            <input class="" type="text" name="" id="inputNumber" placeholder="Enter a Number">
            <button type="submit" class="btn btn-success" id="convertNumberToRoman">Convert</button>
            <div class="displayRoman"></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>

Related question: [Convert a number into a Roman numeral in JavaScript](https://stackoverflow.com/questions/9083037/convert-a-number-into-a-roman-numeral-in-javascript) Yet, it's not a dupe since the current question is really about how form elements work. — Yogi, Sep 27 '22 at 08:57

score 1 · Accepted Answer · answered Sep 27 '22 at 08:45

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 class="container">
  <div class="card row">
    <div class="card-header">Roman Numeral Converter</div>
    <div class="card-body">
      <form id="todo-form" name="form">
        <div class="form-row">
          <div class="form-group col-md-6">
            <input class="" type="text" name="" id="inputNumber" placeholder="Enter a Number">
            <button type="submit" class="btn btn-success" id="convertNumberToRoman">Convert</button>
            <div class="displayRoman"></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.

Function not being called onclick

1 Answers1