为什么表单文本输入的 parseFloat(value) 会给出 NaN？答案

【问题标题】：Why does parseFloat(value) of form text input give NaN?为什么表单文本输入的 parseFloat(value) 会给出 NaN？
【发布时间】：2019-03-30 04:50:40
【问题描述】：

这会在浏览器警报中返回 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>

【问题讨论】：

我敢打赌第一个会在用户填写输入之前触发。
“但是“var”不能使它成为全球性的吗？” 不。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript

【解决方案1】：

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

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

在页面渲染时，文本字段为空白。

是的，这就是它运行的时间：

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

并将in1 的值设置为NaN。

但在这两种情况下，我都会在文本中手动输入一个数字（5 或 3）点击提交按钮之前的字段。

在第一种情况下，你做什么都没有关系，因为变量in1 已经有了它的值。太晚了，那条线已经被执行了。您没有更新代码以使用您输入的号码。

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

【讨论】：

在这两种情况下，文本字段中都有一个数字。
@ReinForce 您在in1 计算出值后输入数据，该值在运行时为空白。然后，当您输入数据并提交表单时，它并没有使用新数据，而是继续使用您输入任何内容之前的旧值。
啊啊啊，我现在明白了。获取值和解析都在页面加载时已经运行。我需要在提交处理程序“内部”声明它。谢谢。

【解决方案2】：

当页面被渲染时，我假设输入中没有值。而且您已经计算了它的值并在提交时使用。

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

【讨论】：

在页面渲染中，文本字段为空白。但在这两种情况下，我在单击提交按钮之前手动在文本字段中输入一个数字（5 或 3）。
@ReinForce 见我上面的评论。你的解释只是强化了我的意思。

【解决方案3】：

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

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

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

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

【讨论】：