爲什麼我的parseFloat函數無法正常工作？

當我在下面做這個練習時，我遇到了這個問題，我無法得到結果，我試圖在num1和num2中輸入一個數字，然後點擊計算按鈕，我希望得到答案。我查了一下Chrome開發者工具，結果發現num3是NaN。爲什麼這是一個NaN？爲什麼我的parseFloat函數無法正常工作？

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); \t 
 
    console.log(parseFloat(num1)); \t \t 
 
}; \t

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

來源

2017-05-08 HM-Dave

這是因爲'num3'超出了你的事件觸發器，那時'num1'和'num2'都是空值。在onclick中傳輸num3 – Roljhon

頁面加載過程中分配給num1的價值將在以後更改它，然後單擊按鈕不會神奇地更新。所以你需要再次檢索它。只是存儲HTMLInputElement變量，而不是它的值：

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

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

來源

2017-05-08 10:09:43 dfsq

移動函數內部的變量：

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>

來源

2017-05-08 10:10:36

其實，你做錯了，你之前獲得元素值您在輸入字段中輸入數值，準確代碼低於

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

來源

2017-05-08 10:18:37

爲什麼我的parseFloat函數無法正常工作？

回答

相關問題