为什么我的parseFloat函数不能正常工作？

Question

When I do this exercise below, I have this problem that I cannot get the result, I attempt to input a number in num1 and a number in num2 , after that I click the calculate button I hope get the answer. I checked the Chrome developer tool, it turned out that the num3 is NaN . Why it's a NaN ?

 var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; var num3 = parseFloat(num1)+parseFloat(num2); var btn = document.getElementById("btn"); btn.onclick=function () { console.log(num3); console.log(parseFloat(num1)); }; 

 <input type="text" name="num1" id="num1"> <input type="text" name="num2" id="num2"> <button class="btn" id="btn">calculate</button> 

Answer 1

The value assigned to num1 during page load will not be updated magically when you change it later and click button. So you need to retrieve it again. Just store HTMLInputElement in variable instead of its value:

var num1Input = document.getElementById('num1');

btn.onclick = function () {
  var num1 = num1Input.value;
  console.log(parseFloat(num1));      
};  

Answer 2

Move the variables inside the function:

 var btn = document.getElementById("btn"); btn.onclick=function () { var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; var num3 = parseFloat(num1)+parseFloat(num2); console.log(num3); console.log(parseFloat(num1)); }; 

 <input type="text" name="num1" id="num1"> <input type="text" name="num2" id="num2"> <button class="btn" id="btn">calculate</button> 

Answer 3

Actually, you are doing wrong here, you getting element value before you enter values in input fields, the accurate code is below

var btn = document.getElementById("btn");
    btn.onclick=function () {
        var num1 = document.getElementById('num1').value;
        var num2 = document.getElementById('num2').value;
        var num3 = parseFloat(num1)+parseFloat(num2);
        console.log(num3);  
        console.log(parseFloat(num1));      
    };