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)

e.g。

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 isNaN会被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数组。使用+符号将每个值转换为字符串，如果结果为|| 0，则将回退NaN添加到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>

我如何给值[1]赋值0以避免在Javascript中获得NaN？

2 个答案: