為什么我的parseFloat函數不能正常工作？

Question

當我在下面進行練習時，遇到無法獲取結果的問題，我嘗試在num1輸入一個數字，在num2輸入一個數字，然后單擊計算按鈕，希望得到答案。 我檢查了Chrome開發人員工具，結果發現num3是NaN 。 為什么是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

稍后更改並單擊按鈕時，頁面加載期間分配給num1的值不會神奇地更新。 因此，您需要再次檢索它。 只需將HTMLInputElement存儲在變量而不是其值中：

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

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

Answer 2

在函數內移動變量：

 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

實際上，您在這里做錯了，在輸入字段中輸入值之前先獲取了元素值，下面是准確的代碼

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