Javascript Question posted in
A very good W3school tutorial can be found here.

Why is my JavaScript is returning NaN when I run the code?

I started learning programming a little while ago, but I got stuck on the functions and intervals part.

What I wanted was a very simple system, to do multiplication, using HTML and JavaScript, passing the input numbers as parameters.

However, when I run the code, it returns NaN as the result.

let button = document.querySelector("#button");
let num1 = parseInt(document.getElementById('num1').value);
let num2 = parseInt(document.getElementById('num2').value);

function operacao(a, b) {
  let resp = a * b;
  return resp;
}

let resto = operacao(num1, num2)
button.addEventListener("click", function() {
  document.getElementById('resto').innerHTML = 'O resultado é: ' + resto
});
<label>
  Informe os numeros:  
  <br>
  <input type="number" id="num1">
  <p>x</p>
  <input type="number" id="num2">
</label>
<br>
<br>
<button id="button" onclick=(operacao)>Multiplicar</button>
<p id="resto"></p>
Tags:

3

Answers


  1. 0

    You’re reading the values from the inputs and performing a calculation on them immediately upon loading the page, before the user has had a chance to enter any values:

    let num1 = parseInt(document.getElementById('num1').value);
let num2 = parseInt(document.getElementById('num2').value);
//...
let resto = operacao(num1, num2)

    Instead, read the values from the input and perform the calculation in the button click handler:

    let button = document.querySelector("#button");

function operacao(a, b) {
  let resp = a * b;
  return resp;
}

button.addEventListener("click", function() {
  // Calculate the result here...
  let num1 = parseInt(document.getElementById('num1').value);
  let num2 = parseInt(document.getElementById('num2').value);
  let resto = operacao(num1, num2);
  document.getElementById('resto').innerHTML = 'O resultado é: ' + resto
});
    <label>
  Informe os numeros:  
  <br>
  <input type="number" id="num1">
  <p>x</p>
  <input type="number" id="num2">
</label>
<br>
<br>
<button id="button" onclick=(operacao)>Multiplicar</button>
<p id="resto"></p>
    Login or Signup to reply.
  2. 0

    You need to get the value of the inputs after clicking of the button. In your code the value of num1 & num2 will be undefined as

    let num1 = parseInt(document.getElementById('num1').value); let num2 = parseInt(document.getElementById('num2').value); are executing before the button click and those inputs are initially empty

    let button = document.querySelector("#button");;

function operacao(a, b) {
  console.log(a, b)
  let resp = a * b;
  return resp;
}


button.addEventListener("click", function() {
  let num1 = parseInt(document.getElementById('num1').value);
  let num2 = parseInt(document.getElementById('num2').value)
  let resto = operacao(num1, num2)
  document.getElementById('resto').innerHTML = 'O resultado é: ' + resto
});
    <label>
  Informe os numeros:  
  <br>
  <input type="number" id="num1">
  <p>x</p>
  <input type="number" id="num2">
</label>
<br>
<br>
<button id="button" onclick=(operacao)>Multiplicar</button>
<p id="resto"></p>
    Login or Signup to reply.
  3. 0

    You are encountering with NaN (Not-a-Number) result because you are trying to get the values of the input fields before the user has had a chance to enter anything. Values of num1 and num2 are NaN because you are calling the parseInt function immediately when the script loads and at that time, the input fields are empty.

    To fix this, you need to get the values of the input fields when the button is clicked, not when the script initially runs.

    I am providing the code below for your reference:

    <label>
  Informe os números:
  <br>
  <input type="number" id="num1">
  <p>x</p>
  <input type="number" id="num2">
</label>
<br><br>
<button id="button">Multiplicar</button>
<p id="resto"></p>

    <script>
  let button = document.querySelector("#button");

  function operacao(a, b) {
    let resp = a * b;
    return resp;
  }

  button.addEventListener("click", function() {
    // Get the input values when the button is clicked
    let num1 = parseInt(document.getElementById('num1').value);
    let num2 = parseInt(document.getElementById('num2').value);

    // Call the operation function with the input values
    let resto = operacao(num1, num2);

    document.getElementById('resto').innerHTML = 'O resultado é: ' + resto;
  });
</script>

    I hope this code will resolve your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search