如何防止我的输出为 Nan？

Question

我正在尝试制作一个预算应用程序，它会提醒用户减去支出后的剩余部分，我的提醒一直显示 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);

Answer 1

没有看到你的 HTML 或功能示例很难说，但我会改变一些事情。

正如其他评论者所说，使用 console.log 查看代码的部分执行并查看数字是 Nan 的位置。

我还要更改这一行，错误可能发生的地方：

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

至：

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

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

Answer 2

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

income和expenses类代表什么样的DOM节点？请分享 HTML 片段

Answer 3

只需将变量设置为 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"/>

如何防止我的输出为 Nan？

How do I prevent my output from being Nan?

html

javascript

for-loop

nan