为什么我不能在JavaScript中添加4个变量，但我能用3个变量来做？

Question

我在尝试添加6个不同输入的值时遇到了这个问题，我注意到如果我添加3个它可以工作，但是如果我添加3个以上的值它就不起作用。

当我在它们之间添加3个值时，一切似乎都能正常工作，但是，例如，如果我添加4个值，结果就像字符串和数字之间的相加。

我可以请你帮忙吗？这是我输入标签的HTML代码：

document.getElementById("b").onclick = function() {
  var x = document.getElementById("x").value;
  var y = document.getElementById("y").value;
  var z = document.getElementById("z").value;
  var a = document.getElementById("a").value;
  var b = document.getElementById("g").value;
  var c = document.getElementById("c").value;
  var risultato = parseFloat(x) + parseFloat(y) + parseFloat(z) + parseFloat(a) + parseFloat(g) + parseFloat(c);

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

<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="b">

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

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

Answer 1

您的重复ID（b）导致了问题。

它抓住了id为b的第一个元素，这是一个文本元素。这是一个非常有力的例子，说明为什么你永远不应该复制一个id。

将文本框ID更改为g（或任何其他未使用的有效ID）可解决此问题。

其次，在form元素内，任何button标签都被认为具有submit的类型默认情况下立即点击提交形式 - 为了改变这种效果我们将button标签更改为input类型为button。

代码在下面正确运行：

document.getElementById("b").onclick = function() {
    var x = document.getElementById("x").value;
    var y = document.getElementById("y").value;
    var z = document.getElementById("z").value;
    var a = document.getElementById("a").value;
    var b = document.getElementById("g").value;
    var c = document.getElementById("c").value;
    var risultato = parseFloat(x) + parseFloat(y) + parseFloat(z) + parseFloat(a) + parseFloat(b) + parseFloat(c);

    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="Applic" />
</form>

<div id="risultato">

</div>

Answer 2

这是一个在6个输入元素之间添加工作的工作示例。运行代码片段按钮，查看输出。

document.getElementById("addButton").onclick = function()
{
  var val1 = document.getElementById('in1').value;
  var val2 = document.getElementById('in2').value;
  var val3 = document.getElementById('in3').value;
  var val4 = document.getElementById('in4').value;
  var val5 = document.getElementById('in5').value;
  var val6 = document.getElementById('in6').value;
  
  var values = [val1, val2, val3, val4, val5, val6];
  var sum = 0.0;
  
  for(var i=0; i < values.length; i++)
  {
    if(values[i] != '' && isNaN(values[i]))
    {
      alert("Input field #in" + (i+1) + " has a non number value");
    }
    else if (values[i] != '') sum += parseFloat(values[i]);
  }
  
  document.getElementById('output').value = sum;
  
};

<table>
  <tr>
    <td><input type="text" id="in1" value="" placeholder="Enter value" /></td>
    <td><input type="text" id="in2" value="" placeholder="Enter value" /</td>
  </tr>
  <tr>
    <td><input type="text" id="in3" value="" placeholder="Enter value" /</td>
    <td><input type="text" id="in4" value="" placeholder="Enter value" /</td>
  </tr>
  <tr>
    <td><input type="text" id="in5" value="" placeholder="Enter value" /</td>
    <td><input type="text" id="in6" value="" placeholder="Enter value" /</td>
  </tr>
</table>

<input type="button" id="addButton" value="Click to add" />

<label for="output">Output:</label><input type="text" id="output" readonly="readonly" value="" />

Answer 3

缩短

如果您必须在HTML中访问相同的内容，请使用document.querySelectorAll()。

#form > input[type='number']

与Array#reduce()汇总

总共

function getResult() {
  return Array.from(document.querySelectorAll("#myForm > input[type='number']")).reduce(function(r, el) {
    return r + +el.value;
  }, 0);
}

function outputResult(e) {
  e.preventDefault();
  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + getResult();
}

document.getElementById("b").addEventListener("click", outputResult);

<form id="myForm">
  <input type="number" placeholder="Valore 1" required>
  <input type="number" placeholder="Valore 2" required>
  <input type="number" placeholder="Valore 3 (se presente)">
  <input type="number" placeholder="Valore 4 (se presente)">
  <input type="number" placeholder="Valore 5 (se presente)">
  <input type="number" placeholder="Valore 6 (se presente)">
  <button id="b" class="btn btn-primary">Applica</button>
</form>
<div id="risultato"></div>