如何将值 [1] 赋值为 0 以避免在 Javascript 中出现 NaN？

Question

我正在尝试创建一个在它们之间添加 6 个输入值的程序，但如果我不给出值（例如，如果我只给出 5 个值），则结果为 NaN。所以 我尝试使用 for 循环和 if 语句为空值赋予 0 值，但它不起作用。 可以请您帮忙吗？

代码：

document.getElementById("b").onclick = function() {

  var values = new Array();
  values[0] = document.getElementById("x").value;
  values[1] = document.getElementById("y").value;
  values[2] = document.getElementById("z").value;
  values[3] = document.getElementById("a").value;
  values[4] = document.getElementById("g").value;
  values[5] = document.getElementById("c").value;

  for (i = 0; i < values.length; i++) {
    if (isNaN(values[i])) {
      values[i] = 0;
    }
  }

  var risultato = parseFloat(values[0]) + parseFloat(values[1]) + parseFloat(values[2]) + parseFloat(values[3]) + parseFloat(values[4]) + parseFloat(values[5]);

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + risultato + ".";
}

<form>
  <input type="number" placeholder="Valore 1" id="x" required>

  <input type="number" placeholder="Valore 2" id="y" required>

  <input type="number" placeholder="Valore 3 (se presente)" id="z">

  <input type="number" placeholder="Valore 4 (se presente)" id="a">

  <input type="number" placeholder="Valore 5 (se presente)" id="g">

  <input type="number" placeholder="Valore 6 (se presente)" id="c">

  <input type="button" class="btn btn-primary" id="b" value="Applica" />
</form>

<div id="risultato" class="desc"></div>

编辑：这不是重复的，因为我在这里写的问题 (Why can't I do addition between 4 variables in JavaScript but I can do it with 3 variables?) 是关于加法的，而这个问题是关于 isNaN 值的。

Answer 1

isNaN 在空字符串上返回 false，因为空字符串被解释为零（这是一个数字）。在检查 NaN 之前，请致电 parseFloat 您的值。 parseFloat 为空字符串返回 NaN。另一种选择是简单地检查字符串是否为空。

即if (isNaN(parseFloat(values[i])) 或 (values[i].length === 0)

例如

document.getElementById("b").onclick = function() {

  var values = new Array();
  values[0] = document.getElementById("x").value;
  values[1] = document.getElementById("y").value;
  values[2] = document.getElementById("z").value;
  values[3] = document.getElementById("a").value;
  values[4] = document.getElementById("g").value;
  values[5] = document.getElementById("c").value;

  for (i = 0; i < values.length; i++) {
    if (isNaN(parseFloat(values[i]))) {
      values[i] = 0;
    }
  }

  var risultato = parseFloat(values[0]) + parseFloat(values[1]) + parseFloat(values[2]) + parseFloat(values[3]) + parseFloat(values[4]) + parseFloat(values[5]);

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + risultato + ".";
}

<form>
  <input type="number" placeholder="Valore 1" id="x" required>
  <input type="number" placeholder="Valore 2" id="y" required>
  <input type="number" placeholder="Valore 3 (se presente)" id="z">
  <input type="number" placeholder="Valore 4 (se presente)" id="a">
  <input type="number" placeholder="Valore 5 (se presente)" id="g">
  <input type="number" placeholder="Valore 6 (se presente)" id="c">
  <input type="button" class="btn btn-primary" id="b" value="Applica" />
</form>

<div id="risultato" class="desc"></div>

做你想做的事的更简单的方法是这样的。 (parseFloat(a) || 0) 表示如果a 是NaN，它将被替换为0。

document.getElementById("b").onclick = function() {

  var values = [
    document.getElementById("x").value,
    document.getElementById("y").value,
    document.getElementById("z").value,
    document.getElementById("a").value,
    document.getElementById("g").value,
    document.getElementById("c").value
  ];

  var risultato = values.reduce(function(a, b) {
    return (parseFloat(a) || 0) + (parseFloat(b) || 0);
  }, 0);

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + risultato + ".";
}

<form>
  <input type="number" placeholder="Valore 1" id="x" required>
  <input type="number" placeholder="Valore 2" id="y" required>
  <input type="number" placeholder="Valore 3 (se presente)" id="z">
  <input type="number" placeholder="Valore 4 (se presente)" id="a">
  <input type="number" placeholder="Valore 5 (se presente)" id="g">
  <input type="number" placeholder="Valore 6 (se presente)" id="c">
  <input type="button" class="btn btn-primary" id="b" value="Applica" />
</form>

<div id="risultato" class="desc"></div>

Answer 2

为每个输入添加一个类名。使用document.querySelectorAll() 获取所有inputs。迭代inputs 数组。使用+ 符号将每个值转换为字符串，如果结果为NaN，则将回退|| 0 添加到0。将它们全部收集到 sum 变量中。

document.getElementById("b").onclick = function() {
  var inputs = document.querySelectorAll('.number'); // get all elements with the .number class
  var sum = 0; // init sum

  for (i = 0; i < inputs.length; i++) {
    sum += +inputs[i].value || 0; // convert each value to a number, if it's isNaN subtitute 0
  }

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + sum + ".";
}

<form>
  <input type="number" placeholder="Valore 1" class="number" required>

  <input type="number" placeholder="Valore 2" class="number" required>

  <input type="number" placeholder="Valore 3 (se presente)" class="number">

  <input type="number" placeholder="Valore 4 (se presente)" class="number">

  <input type="number" placeholder="Valore 5 (se presente)" class="number"">

  <input type="number" placeholder="Valore 6 (se presente)" class="number">

  <input type="button" class="btn btn-primary" id="b" value="Applica" />
</form>

<div id="risultato" class="desc"></div>