Question

我必须使用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。

Answer 1

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

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);

Answer 2

如[{3}}

所述

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

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

＆＃13;

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;

  });

});

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 4

来自：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt

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

在尝试在parseInt中使用它们之前，您应该将空值转换为默认值。

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

当输入字段为空时，Javascript计算返回NaN

4 个答案:

更新