Question

输入字段：

<input name="qty1" id ="qty1" type="text" onblur="sum()"/>
<input name="qty2" id ="qty2" type="text" onblur="sum()"/>
<input name="qty3" id ="qty3" type="text" onblur="sum()"/>
<input name="qty4" id ="qty4" type="text" onblur="sum()"/>
<input name="total" id ="total" type="text"/>

的Javascript ：

<script type="text/javascript">
  function sum(){
      //grab the values
      qty1 = document.getElementById('qty1').value;
      qty2 = document.getElementById('qty2').value;
      qty3 = document.getElementById('qty3').value;
      qty4 = document.getElementById('qty4').value;
      document.getElementById('total').value = parseFloat(qty1) + parseFloat(qty2) + parseFloat(qty3) + parseFloat(qty4);
  }
  </script>

代码显示4个字段，用户可以在其中插入数字，第5个字段重新计算总数，例如：第1个字段（qty1）： 1 ，第2个字段（qty2）： 2 ，第3场（qty3）： 3 ，第4场（qty4）： 4 ，第5场（总计）： 10 （1 + 2 + 3 + 4 = 10）。

我想让这段代码更加用户友好，因此脚本会自动将空字段视为 0 。 Currenly如果用户将字段留空，则总计显示＆＃34; NaN＆＃34;

有任何建议吗？

谢谢，汤姆

Answer 1

使用isNaN函数确定值是否存在且是否为数字，如果不存在，则指定默认值。

if(!isNan(qty4)){
    qty=0;
}

Answer 2

具有讽刺意味的是，如果你没有使用parseFloat，那么你首先就不会得到NaN。 parseFloat('')会返回NaN。

您仍然应该将字符串转换为数字，但不是parseFloat，而是使用the unary + operator。 +''返回0，因为空字符串的数学值为0：

function sum(){
  //grab the values
  var qty1 = +document.getElementById('qty1').value;
  var qty2 = +document.getElementById('qty2').value;
  var qty3 = +document.getElementById('qty3').value;
  var qty4 = +document.getElementById('qty4').value;
  document.getElementById('total').value = qty1 + qty2 + qty3 + qty4;
}

现在，只有当用户提供无法转换为数字的值（例如NaN）时，才会获得abc。要解决这个问题，您确实可以使用isNaN。

以下是您的代码的固定且更简洁的版本，使用reduce：

function sum(){
  document.getElementById('total').value = 
    [1, 2, 3, 4].reduce(function(total, id) {
       var v = +document.getElementById('qty'+id).value;
       return total + isNan(v) ? 0 : v; 
    }, 0);
}

Answer 3

function sum(){
  //grab the values
  qty1 = document.getElementById('qty1').value || 0;
  qty2 = document.getElementById('qty2').value || 0;
  qty3 = document.getElementById('qty3').value || 0;
  qty4 = document.getElementById('qty4').value || 0;
  document.getElementById('total').value = parseFloat(qty1) + parseFloat(qty2) + parseFloat(qty3) + parseFloat(qty4);
}

空字段为＆＃34; 0＆＃34;默认情况下

3 个答案: