javascript - 为什么表单文本输入的 parseFloat(value) 给出 NaN？

Question

这会在浏览器警报中返回 NaN:

var in1 = parseFloat(document.getElementById('input1').value);
var form = document.getElementById('formC');

form.addEventListener('submit', function() {
    alert(in1);
});

但是这有效:

var form = document.getElementById('formC');

form.addEventListener('submit', function() {
    var in1 = parseFloat(document.getElementById('input1').value);
    alert(in1);
});

有人可以解释一下这是怎么回事吗？从错误来看，“in1”超出了“function()” block 的范围，但是“var”不会使其成为全局的吗？

html部分:

<form id="formC">
    <input type="text" id="input1">
</form>

Answer 1

因为在第一个示例中，您试图获取输入的值并立即解析其中的 float (在用户有机会向其中输入任何数据之前)。因此，尝试从空字符串中解析 float 将产生 NaN。

但在第二种情况下，您要等到表单提交后才能获取数据，这是在用户在输入中输入了一些数据之后。

On page render the text field is blank.

是的，那就是运行时:

var in1 = parseFloat(document.getElementById('input1').value);

并将 in1 的值设置为 NaN。

But in both cases I manually type a number (5 or 3) into the text field before clicking the submit button.

在第一种情况下，你做什么并不重要，因为变量 in1 已经有了它的值。太晚了，该行已经执行了。您没有代码可以将其更新为使用您输入的号码。

在第二种情况下，它会起作用，因为在您提交表单(即在输入字段中输入一些数据之后)之前，变量不会尝试获取值。