如何防止我的输出是 Nan？答案

【问题标题】：How do I prevent my output from being Nan?如何防止我的输出是 Nan？
【发布时间】：2020-07-06 11:35:12
【问题描述】：

我正在尝试制作一个预算应用程序，该应用程序会在减去收入减去支出后提醒用户余额，我的警报一直说 Nan。我正在使用 for 循环来总结来自用户的收入和支出输入。我已经包含了我的代码。

谢谢！

function Maincalc(){
  var incomeVal = document.getElementsByClassName("income");
  var expenseVal = document.getElementsByClassName("expenses");
  var tot = 0;

  for (var i = 0; i < incomeVal.length; i++){
      if(parseInt(incomeVal[i].value))
          var incomeTot = tot + parseInt(incomeVal[i].value);
  }
  for (var i = 0; i < expenseVal.length; i++){
      if(parseInt(expenseVal[i].value))
          var expenseTot = tot + parseInt(expenseVal[i].value);
}
var x = incomeTot - expenseTot;
alert(x);
}

var btn = document.getElementById("submit");

btn.addEventListener("click", Maincalc);

【问题讨论】：

1：不要使用alert，它很古老，实际上没用。使用控制台 API（console.log 等）或使用真正的模式。 2：这个出错的例子是什么？（例如，当事情“破裂”时涉及到哪些价值？）
尝试使用浏览器的一些开发工具（通常按 F12）来逐步执行脚本。在您认为可能出错的地方设置一些断点。
@Mike'Pomax'Kamermans 我在想可能是对输入值求和的 for 循环无法正常工作。
incomeVal[i].value 中的value 是什么？如果您尝试获取 html 元素中的内部文本，则应为 incomeVal[i].textContent

标签： javascript html for-loop nan

【解决方案1】：

只需将一个变量设置为 parseInt(...) 并使用 if(!isNaN(val) 检查以确保它是一个数字。请参阅下面的示例。

旁注，您在 for 块中声明了一些没有多大意义的变量。

function Maincalc() {
  var incomeVal = document.getElementsByClassName("income");
  var expenseVal = document.getElementsByClassName("expenses");
  var incomeTot = 0;
  var expenseTot = 0;

  for (var i = 0; i < incomeVal.length; i++) {
    let val = parseInt(incomeVal[i].value);
    if (!isNaN(val))
      incomeTot += val;
  }
  for (var i = 0; i < expenseVal.length; i++) {
    let val = parseInt(expenseVal[i].value)
    if (!isNaN(val))
      expenseTot += val;
  }
  var x = incomeTot - expenseTot;
  alert(x);
}

Maincalc();

<input class="income" value="12" />
<input class="income" value="12" />
<input class="income" value="a" />

<input class="expenses" value="5"/>
<input class="expenses" value="5"/>
<input class="expenses" value="b"/>

【讨论】：

谢谢！这使我的代码终于可以工作了！ parseInt 生成incomeVal & 和费用val，整数还是分析字符串的整数？我还在学习 JS，如果我的问题很奇怪，请见谅。
它将尝试将它们解析为 int，如果失败则返回 isNaN

【解决方案2】：

确保document.getElementsByClassName("income") 和document.getElementsByClassName("expenses") 返回的DOM 节点包含数值。

income 和 expenses 类代表了什么样的 DOM 节点？请分享 HTML sn-p

【讨论】：

【解决方案3】：

如果没有看到您的 HTML 或功能示例很难说，但我会更改几件事。

正如其他评论者所说，使用console.log 来查看您的代码的部分执行情况，并查看数字在哪里是 Nan。

我也会更改可能发生错误的这一行：

     if(parseInt(expenseVal[i].value))

到：

  if (!isNaN(expenseVal[i].value)) {

验证该数字是否有效并且是一个数字；此外，当使用 parseInt 时，传递第二个参数以确保解析的数字有效并且关于错误，例如 parseInt(incomeVal[i].value, 10)。也不相关，但在这种情况下，map 或 reduce 函数也会更好。

【讨论】：