当输入字段为空时，Javascript 计算返回 NaN [重复]

Posted 2023-03-11

【中文标题】当输入字段为空时，Javascript 计算返回 NaN [重复]

【英文标题】：Javascript calculation returns NaN when input fields are empty [duplicate]

【发布时间】：2017-12-04 00:41:27

【问题描述】：

我必须使用 javascript 使用表单字段中的值进行小计算。计算公式如下：

totalIncome = income1 + income2 *0.7 + income3/48 + (income4 * 0.7)/48;

income1、income2、income3 和 income4 的值可以为零，字段可以为空。

我的代码如下：

 <tr id="row">
  <td>No. of Dependant(s)</td>
  <td><input type="text" id="income1" value=""></td>
  <td><input type="text" id="income2" value=""></td>
  <td><input type="text" id="income3" value=""></td>
  <td><input type="text" id="income4" value=""></td>
  <td><input type="text" id="totalIncome" readonly></td>
</tr>

我用于公式的公式脚本如下：

var income1 = document.getElementById("income1");
var income2 = document.getElementById("income2");
var income3 = document.getElementById("income3");
var income4 = document.getElementById("income4");
var totalIncome = document.getElementById("totalIncome");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input)

  input.addEventListener("blur", function()
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    totalIncome.value = parseInt(income1.value, 10) + parseInt(income2.value, 10)* 0.7  + parseInt(income3.value, 10)/48 + (parseInt(income4.value, 10)*0.7)/48;


  );

);

但是，当某些字段为空时，我不确定为什么 totalIncome 会变为 NaN。

【问题讨论】：

是的，就是错字

【参考方案1】：

您可以将||0 与您的parseInt() 调用结合使用，以确保返回的值始终是一个数字，如果<input> 字段为空，则返回一个0。

var income1 = document.getElementById("income1");
var income2 = document.getElementById("income2");
var income3 = document.getElementById("income3");
var income4 = document.getElementById("income4");
var totalIncome = document.getElementById("totalIncome");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input) 

  input.addEventListener("blur", function() 
    totalIncome.value =
      (parseInt(income1.value, 10) || 0) +
      (parseInt(income2.value, 10) || 0) * 0.7 +
      (parseInt(income3.value, 10) || 0) / 48 +
      ((parseInt(income4.value, 10) || 0) * 0.7) / 48;
  );
);

<table>
  <tr id="row">
    <td>No. of Dependant(s)</td>
    <td><input type="text" id="income1" value=""></td>
    <td><input type="text" id="income2" value=""></td>
    <td><input type="text" id="income3" value=""></td>
    <td><input type="text" id="income4" value=""></td>
    <td><input type="text" id="totalIncome" readonly></td>
  </tr>
</table>

更新

在 OP 要求后，您可以显示toFixed(2)，稍微改变totalIncome.value 的计算，如下所示：

totalIncome.value = (
  (parseInt(income1.value, 10) || 0) +
  (parseInt(income2.value, 10) || 0) * 0.7 +
  (parseInt(income3.value, 10) || 0) / 48 +
  ((parseInt(income4.value, 10) || 0) * 0.7) / 48).toFixed(2);

【讨论】：

有什么办法让我只显示 toFixed(2)？

@xhinvis 我刚刚用这个更新了答案。看看吧！

【参考方案2】：

正如here所描述的那样

从给定字符串解析的整数。如果第一个字符不能转换为数字，则返回 NaN。

因此，如果返回 null，则需要指定默认值（例如 0）。使用parseInt(income.value || 0) 可能会有所帮助。

var income1 = document.getElementById("income1");
var income2 = document.getElementById("income2");
var income3 = document.getElementById("income3");
var income4 = document.getElementById("income4");
var totalIncome = document.getElementById("totalIncome");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input)

  input.addEventListener("blur", function()
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    totalIncome.value = parseInt(income1.value || 0, 10) 
                + parseInt(income2.value || 0, 10)* 0.7 
                + parseInt(income3.value || 0, 10)/48 
                + (parseInt(income4.value || 0, 10)*0.7)/48;

  );

);

<table>
<tr id="row">
    <td>No. of Dependant(s)</td>
  <td><input type="text" id="income1" value=""></td>
  <td><input type="text" id="income2" value=""></td>
  <td><input type="text" id="income3" value=""></td>
  <td><input type="text" id="income4" value=""></td>
  <td><input type="text" id="totalIncome" readonly></td>
</tr>
</table>

【参考方案3】：

当文本框中的值为NaN时，只需提供一个默认值。

var income1 = document.getElementById("income1");
var income2 = document.getElementById("income2");
var income3 = document.getElementById("income3");
var income4 = document.getElementById("income4");
var totalIncome = document.getElementById("totalIncome");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input)
  input.addEventListener("blur", function()
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    totalIncome.value = (parseInt(income1.value, 10) || 0) + (parseInt(income2.value, 10) || 0 )* 0.7  + (parseInt(income3.value, 10)|| 0)/48 + ((parseInt(income4.value, 10) || 0 )*0.7)/48;

  console.log(totalIncome.value);
  );

);

<table>
<tr id="row">
  <td>No. of Dependant(s)</td>
  <td><input type="text" id="income1" value=""></td>
  <td><input type="text" id="income2" value=""></td>
  <td><input type="text" id="income3" value=""></td>
  <td><input type="text" id="income4" value=""></td>
  <td><input type="text" id="totalIncome" readonly></td>
</tr>
</table>

【参考方案4】：

发件人：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt

从给定字符串解析的整数。如果第一个字符 无法转换为数字，返回 NaN。

您应该先将空值转换为默认值，然后再尝试在 parseInt 中使用它们。

除了验证 parseInt 的结果外，在数学表达式中使用它之前，以防您想显示错误值的错误。