javascript 表单计算返回 NaN答案

【问题标题】：javascript form calculation returns NaNjavascript 表单计算返回 NaN
【发布时间】：2012-10-11 16:21:06
【问题描述】：

我有一个订单表格和一个 JavaScript，它应该从文本框（数量 * 价格）、复选框和收音机中计算总计，但我错过了一些东西，因为我收到了 NaN 错误。有人可以帮我解决吗？非常感谢。

DEMO

【问题讨论】：

您应该首先阅读并修复 JS Bin 显示的 5 个警告。
整个概念是有缺陷的，将您的计算变量作为一个字符串开始，然后将其他字符串连接到它......并期望一个数字作为回报。使用控制台记录值会看到它；真是一团糟
你不应该尝试修复这个烂摊子，而是从头开始重写它，而不使用eval。因为现在您正在将用户输入（表单字段值）作为 javascript 代码执行！而你离麻烦只有一步（接受 url 参数）。

标签： javascript checkbox textbox radio nan

【解决方案1】：

正如许多人评论的那样，您的代码存在一些严重的缺陷。我不会重复这些问题，但是，它们非常重要，随着您对所使用的技术越来越熟悉，您应该学习。

你得到一个 NaN 的原因是这样的。您的 fields 对象是一个数组。您的代码以任意索引填充字段数组，即 fields[f] = 0;

当您为索引填充数组时，例如 5，您的代码会执行此操作 fields[5] = 0;。使用此语句，您可以从一个空数组 [] 变为一个包含 6 个条目的数组，其中前 5 个条目默认为 undefined [undefined, undefined, undefined, undefined, undefined, 0].

现在稍后在您的代码中，当您进行求和并添加数组条目（使用 eval 准备好字符串）时，这些 ...undefined+0+undefined+8... 正在产生非数字错误。

相反，防止这种情况的一种方法是将条目推送到字段数组中，例如：

if (userInputs[f].value)
{
  fields.push(userInputs[f].value);
}
else
{
  fields.push(0);
}

push 将在数组末尾添加一个条目。如果您 push(0)，[] 将变为 [0]。

【讨论】：

谢谢大家的建议，我认为我已经接近解决这个表格，但显然我不是。我目前看到的唯一解决方案是深入学习 JavaScript。