在 JavaScript 中添加输入值时忽略 NaN [重复]答案

【问题标题】：Ignore NaN when adding input values in JavaScript [duplicate]在 JavaScript 中添加输入值时忽略 NaN [重复]
【发布时间】：2022-03-16 20:52:52
【问题描述】：

我有以下代码：

var inputsArray = document.getElementsByTagName('input');

function computeTotal() {
  var tot = 0;
  tot += parseFloat(inputsArray[0].value);
  tot += parseFloat(inputsArray[1].value);
  tot += parseFloat(inputsArray[2].value);
  inputsArray[3].value = tot;
}

<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text" disabled></input>
<button type="button" onclick="computeTotal()">Calculate</button>

当在所有三个框中输入一个数字时，它计算得很好，但我希望即使一个框为空，它也能计算，实际上返回 NaN。

P.S.：我知道我可以使用“for”循环和 isNaN() 方法来跳过空白输入，但我真的在寻找一种解决方案来逐个添加输入。

我不想将 NaN 转换为 0。

【问题讨论】：

var val0 = inputsArray[0].value; tot += isNaN(val0 || val0=="")? 0:parseFloat(val0);
只需将框的默认值设为 0... 或在无效数字时检查并显示验证

标签： javascript html

【解决方案1】：

你可以为每一行做这样的事情：

if (!isNaN(inputsArray[0].value)) {  tot += parseFloat(inputsArray[0].value);}

【讨论】：

错了。该值不是“NAN”，但是当您将其转换为浮点数时，它会返回“NaN”。
为什么？我测试是否不是数字，如果为假，我进行操作
解释你的反对意见？因为这项工作我只是不检查空输入
好的，我会收回反对票，尽管您的回答与问题没有直接关系。他正在寻找检查isNaN()之后执行parseFloat()的价值。

【解决方案2】：

在ternary operator 的帮助下，您可以执行以下操作：

var inputsArray = document.getElementsByTagName('input');

function computeTotal(){
  var tot = 0;
  tot += (isNaN(inputsArray[0].value) || inputsArray[0].value=="") ? 0 : parseFloat(inputsArray[0].value);
  tot += (isNaN(inputsArray[1].value) || inputsArray[1].value=="") ? 0 : parseFloat(inputsArray[1].value);
  tot += (isNaN(inputsArray[2].value) || inputsArray[2].value=="") ? 0 : parseFloat(inputsArray[2].value);
  inputsArray[3].value = tot;
}

<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text" disabled></input>
<button type="button" onclick="computeTotal()">Calculate</button>

【讨论】：

我选择了更简单的答案作为正确答案；但是这也很有效，谢谢！
@Gramacho，不客气。感谢您接受最适合您的目的的答案。提醒您，您接受的答案的一个缺点是，如果inputs 中的任何一个错误地具有hello, hi, john 等字符串，则该方法将不起作用。因为1*hello 会给您NaN.. ..再次感谢。

【解决方案3】：

将你的值乘以 1 以将其转换为整数：

parseFloat(1*inputsArray[0].value);

【讨论】：

非常简单有效！谢谢！
当我使用不可转换的字符串（例如“bob”）运行它时会产生 NaN。
它也不会忽略 NaN。
它回答了“当字段为空时”的问题。显然，如果字段无法识别为数字，最好检查用户输入并阻止提交