Question

我需要使用javascript创建订单表单，并且必须使用＆＃34; 0＆＃34;填充一些空白字段所以我不能在最终总结中获得NaN。

问题是，订单表格是一个错字3模板，所以我不能提前填写字段。我的想法是将最终总和中的NaN字段转换为整数0并保留客户更改的值。

所以，完整的代码看起来像这样，但我认为唯一有问题的部分是最后的add函数：

<pre>var arrPRICES = ["0", "1.99", "2.99", "3.99", "4.99", "5.99", "6.99", "7.99", "8.99", "9.99"];
function changeInput(objSel, strName){
objSel.form.elements[strName].value = arrPRICES[objSel.selectedIndex];
}


 function cal() {
  var ep01 = parseFloat(document.getElementById("ep01").value);
  var stk01 = parseFloat(document.getElementById("stk01").value);
  var gb01 = parseFloat(document.getElementById("gp01").value = stk01 * ep01).toFixed(2);
  document.getElementById("gp01").value = gb01;
}

 function calc() {
  var ep02 = parseFloat(document.getElementById("ep02").value);
  var stk02 = parseFloat(document.getElementById("stk02").value);
  var gb02 = parseFloat(document.getElementById("gp02").value = stk02 * ep02).toFixed(2);
  document.getElementById("gp02").value = gb02;
}

 function calcu() {
  var ep03 = parseFloat(document.getElementById("ep03").value);
  var stk03 = parseFloat(document.getElementById("stk03").value);
  var gb03 = parseFloat(document.getElementById("gp03").value = stk03 * ep03).toFixed(2);
  document.getElementById("gp03").value = gb03;
 }

  function calcul() {
  var ep04 = parseFloat(document.getElementById("ep04").value);
  var stk04 = parseFloat(document.getElementById("stk04").value);
  var gb04 = parseFloat(document.getElementById("gp04").value = stk04 * ep04).toFixed(2);
  document.getElementById("gp04").value = gb04;
 }

  function calcula() {
  var ep05 = parseFloat(document.getElementById("ep05").value);
  var stk05 = parseFloat(document.getElementById("stk05").value);
  var gb05 = parseFloat(document.getElementById("gp05").value = stk05 * ep05).toFixed(2);
  document.getElementById("gp05").value = gb05;
 }

 function calculat() {
  var ep06 = parseFloat(document.getElementById("ep06").value);
  var stk06 = parseFloat(document.getElementById("stk06").value);
  var gb06 = parseFloat(document.getElementById("gp06").value = stk06 * ep06).toFixed(2);
  document.getElementById("gp06").value = gb06;
 }

 function calculati() {
  var ep07 = parseFloat(document.getElementById("ep07").value);
  var stk07 = parseFloat(document.getElementById("stk07").value);
  var gb07 = parseFloat(document.getElementById("gp07").value = stk07 * ep07).toFixed(2);
  document.getElementById("gp07").value = gb07;
 }

  function calculatio() {
  var ep08 = parseFloat(document.getElementById("ep08").value);
  var stk08 = parseFloat(document.getElementById("stk08").value);
  var gb08 = parseFloat(document.getElementById("gp08").value = stk08 * ep08).toFixed(2);
  document.getElementById("gp08").value = gb08;
 }

 function calculation() {
  var ep09 = parseFloat(document.getElementById("ep09").value);
  var stk09 = parseFloat(document.getElementById("stk09").value);
  var gb09 = parseFloat(document.getElementById("gp09").value = stk09 * ep09).toFixed(2);
  document.getElementById("gp09").value = gb09;
 }

function add(gp01,gp02,gp03,gp04,sum1,summe01) {
  var gp01 = parseFloat(document.getElementById("gp01").value);
  if (parseFloat(document.getElementById("gp02").value = ""))
    var gp02 = parseFloat(document.getElementById("gp02").value = '0');
    } else {
    parseFloat(document.getElementById("gp02").value);
    }
  if (parseFloat(document.getElementById("gp03").value = ""))
    var gp03 = parseFloat(document.getElementById("gp03").value = '0');
    } else {
    var gp03 = parseFloat(document.getElementById("gp03").value);
    }
if (parseFloat(document.getElementById("gp04").value = ""))
    var gp04 = parseFloat(document.getElementById("gp04").value = '0');
    } else {
    var gp04 = parseFloat(document.getElementById("gp04").value);
    }
if (parseFloat(document.getElementById("gp05").value = ""))
    var gp05 = parseFloat(document.getElementById("gp05").value = '0');
    } else {
    var gp05 = parseFloat(document.getElementById("gp05").value);
    }
if (parseFloat(document.getElementById("gp06").value = ""))
    var gp06 = parseFloat(document.getElementById("gp06").value = '0');
    } else {
    var gp06 = parseFloat(document.getElementById("gp06").value);
    }
if (parseFloat(document.getElementById("gp07").value = ""))
    var gp07 = parseFloat(document.getElementById("gp07").value = '0');
    } else {
    var gp07 = parseFloat(document.getElementById("gp07").value);
    }
if (parseFloat(document.getElementById("gp08").value = ""))
    var gp08 = parseFloat(document.getElementById("gp08").value = '0');
    } else {
    var gp08 = parseFloat(document.getElementById("gp08").value);
    }
if (parseFloat(document.getElementById("gp09").value = ""))
    var gp09 = parseFloat(document.getElementById("gp09").value = '0');
    } else {
    var gp09 = parseFloat(document.getElementById("gp09").value);
    }
  var sum1 = parseFloat(document.getElementById("summe01").value = gp01 + gp02 + gp03 + gp04 + gp05 + gp06 + gp07 + gp08 + gp09).toFixed(2);
  document.getElementById("summe01").value = sum1;
}
</pre>

在上面的版本之前，我插入了以下添加功能，但只有当所有字段都输入了值时，计算才有效：

<pre>
    function add(gp01,gp02,gp03,gp04,sum1,summe01) {
  var gp01 = parseFloat(document.getElementById("gp01").value);
  var gp02 = parseFloat(document.getElementById("gp02").value);
  var gp03 = parseFloat(document.getElementById("gp03").value);
  var gp04 = parseFloat(document.getElementById("gp04").value);
  var gp05 = parseFloat(document.getElementById("gp05").value);
  var gp06 = parseFloat(document.getElementById("gp06").value);
  var gp07 = parseFloat(document.getElementById("gp07").value);
  var gp08 = parseFloat(document.getElementById("gp08").value);
  var gp09 = parseFloat(document.getElementById("gp09").value);
  var sum1 = parseFloat(document.getElementById("summe01").value = gp01 + gp02 + gp03 + gp04 + gp05 + gp06 + gp07 + gp08 + gp09).toFixed(2);
  document.getElementById("summe01").value = sum1;
}
</pre>

提前多多感谢！

Answer 1

您可以通过以下几种方式处理它：

创建一个执行字符串到数字转换的函数，并处理""大小写：
```
function parse(str) {
    return str == "" ? 0 : parseFloat(str);
}
```
然后直接使用它而不是直接使用parseFloat：
```
var ep01 = parse(document.getElementById("ep01").value);
```
如果值不是空白但无法转换为数字，那么仍然会为您NaN提供。
使用JavaScript＆＃39; curiously powerful || operator：
```
var ep01 = parseFloat(document.getElementById("ep01").value) || 0;
```
工作原理：如果parseFloat导致NaN（或0），则使用0。如果parseFloat导致0以外的任何数字，则使用该数字。在JavaScript中，||不会导致true或false像许多语言中的逻辑OR运算符一样，但如果是{s}，则会产生左手值＆＃34; truthy＆＃34;如果左侧值是＆＃34;假的，则为右侧值。＆＃34;在JavaScript中，＆＃34; falsey＆＃34;值为0，NaN，""，null，undefined，当然还有false;所有其他值都是＆＃34; truthy＆＃34;。

这为空白字段提供了0 ，为空白字段但不能转换为数字的字段提供了
。

当然，如果您愿意，可以将其包装在函数中以避免冗长：
```
function parse(str) {
    return parseFloat(str) || 0;
}
```

Answer 2

正如提示一样，您可以使用字段集或其他元素来大大简化代码，以包含您想要的输入。然后，您可以根据需要在字段集中放置尽可能多的元素，例如

<form>
  <fieldset name="set0">
    <input name="i0">0<br>
    <input name="i1">1<br>
    <input name="i2">2<br>
    <input name="i3">3<br>
  </fieldset>
  <input type="text" readonly name="total"><br>
  <input type="button" onclick="calcTotal(this);" value="Get total">
</form>

<script>
  function calcTotal(el) {
    var form = el.form;
    var set = form.set0.elements;
    var total = 0;

    for (var i=0, iLen=set.length; i<iLen; i++) {

      // Borrowing from TJ's answer
      total += parseFloat(set[i].value) || 0;
    }
    form.total.value = total;
  }
</script>

以上内容利用了字段集elements collection。您可能不喜欢它对表单所做的操作，但如果您愿意，可以使用CSS更改它，或者以类似的方式使用其他元素。

订单 - 将NaN替换为0

2 个答案: