订单 - 将 NaN 替换为 0

order form - replace NaN with 0

本文关键字：替换 NaN 订单更新时间：2023-09-26

我需要只用javascript创建一个订单，并且必须用"0"填充一些空白字段，这样我就不会在最终求和时得到NaN。

问题是，该订单是 typo3 模板，所以我无法提前填写字段。我的想法是将最终求和时的 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>

在上面的版本之前，我插入了以下 add 函数，但仅当所有字段都输入了值时，计算才有效：

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

提前非常感谢！

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

创建一个执行字符串到数字转换的函数，并处理""情况：
```
function parse(str) {
    return str == "" ? 0 : parseFloat(str);
}
```
然后只需使用它而不是直接使用 parseFloat：
```
var ep01 = parse(document.getElementById("ep01").value);
```
如果值不为空但无法转换为数字，这仍然会为您提供NaN。
使用 JavaScript 非常强大的 || 运算符：
```
var ep01 = parseFloat(document.getElementById("ep01").value) || 0;
```
工作原理：如果parseFloat导致NaN（或0），则使用0。如果parseFloat得到 0 以外的任何数字，则使用该数字。在 JavaScript 中，|| 不会像许多语言中的逻辑 OR 运算符那样产生true或false，而是如果左手值为"真"，则生成左边的值，如果左手值为"假"，则生成右边的值。在JavaScript中，"falsey"值是0、NaN、""、null、undefined，当然还有false;所有其他值都是"真实的"。
这为您提供了空白字段和非空白但无法转换为数字的字段0。
当然，如果您愿意，可以将其包装在一个函数中以避免冗长：
```
function parse(str) {
    return parseFloat(str) || 0;
}
```

作为提示，您可以使用字段集或其他元素来包含要总计的输入，从而大大简化代码。然后，您可以根据需要在字段集中放置任意数量的元素，例如

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

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