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

在函数内移动变量：

＆＃13;

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

＆＃13;

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

＆＃13;

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

为什么我的parseFloat函数无法正常工作？

3 个答案: