why do i get NaN when i try to multiply these numbers?

Question

i try to multiply two numbers and show the result in a textbox but i get NaN when i click the button.

var firstBox=parseFloat(document.getElementById('firstTxt').value);
    var secondBox=parseFloat(document.getElementById('secondTxt').value);
    var the_answer=document.getElementById('answer');
    var calculate=document.getElementById('btn');
    
    calculate.onclick=function(){
      var result= firstBox*secondBox;
      the_answer.value=result;
    }
    
    
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>title</title>
      </head>
      <body style="background-color: cadetblue;">
      <p><input type="text" id="firstTxt"/> </p>
      <p><input type="text" id="secondTxt"/> </p>
      <p><input type="button" id="btn" value="Calculate"> </p>
      <p><input type="text" id="answer"/> </p>
    <script src="practice.js"></script>
      </body> 
    </html>

Answer 1

The firstBox and secondBox variables does not updates it's values when inputs changes.

So move/copy below lines inside of onclick handler:

var firstBox=parseFloat(document.getElementById('firstTxt').value);
var secondBox=parseFloat(document.getElementById('secondTxt').value);

why do i get NaN when i try to multiply these numbers?

Question

1 answers

solution1
1 2020-10-17 07:43:18

why do i get NaN when i try to multiply these numbers?

Question

1 answers

solution1 1 2020-10-17 07:43:18

solution1
1 2020-10-17 07:43:18