为什么我不能在 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

这是一个在 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 2

您的重复 ID (b) 导致了问题。

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

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

其次，在 form 元素内，任何 button 标签默认被认为具有 submit 类型，点击后立即提交表单 - 为了改变这种效果，我们改变了button 标签到类型为 button.

的 input

下面的代码运行正确：

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

为什么我不能在 JavaScript 中的 4 个变量之间进行加法运算，但我可以用 3 个变量进行加法运算？

Why can't I do addition between 4 variables in JavaScript but I can do it with 3 variables?

javascript

input

addition