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（）”块的范围，但是“ var”不是全局的吗？

html部分：

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

Answer 1

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

但是在第二个步骤中，您要等到表单提交后才能获取数据，这是在用户将一些数据输入到输入中之后。

页面上的文本字段为空白。

是的，那就是当它运行时：

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

并将in1的值设置为NaN。

但是在两种情况下，我都会在文本中手动输入数字（5或3）字段，然后单击“提交”按钮。

在第一种情况下，您做什么都没有关系，因为变量in1已具有其值。为时已晚，该行已经执行。您没有代码可以更新它以使用您输入的号码。

在第二种情况下，它起作用了，因为变量是在您提交表单（即在输入字段中输入一些数据之后）之后才尝试获取值。

Answer 2

呈现页面时，我假设输入中没有任何值。并且您已经计算出它的价值，并且仅在提交时使用。

但是在第二种情况下，您正在读取输入的实时值

Answer 3

Sushanth-和Scott Marcus是正确的，您可以通过对代码进行以下更改来进行验证

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

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

您可以看到in1在函数内部是可访问的，您只需要在提交后读取该值即可，而不是之前。除非提供无效的浮点数，否则以上代码不应返回NaN。

为什么表单文本输入的parseFloat（value）给出NaN？

3 个答案: