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

问题

I encountered this problem while trying to add the values of 6 different input, I noticed that if I add 3 of them it works, but if I add more than 3 values it doesn't work.

When I add 3 values between them, everything seems to work correctly but, for example, if I add 4 values, the result is like the addition between a string and a number.

May I have your help please? This is my HTML code for the imput tags:

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>

回答1:

Your duplicate id (b) was causing issues.

It was grabbing the first element with id b which was a text element. This is a pretty powerful example as to why you should never duplicate an id.

Changing the textbox id to g (or any other valid id that isn't being used) resolves the issue.

Secondly, inside a form element any button tag is considered to have the type of submit by default which submits the form immediately on click - to alter this effect we changed the button tag to an input with the type of button.

The code runs correctly below:

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>

回答2:

Here is a working example of addition working between 6 input elements. Run the snippet the button the see the output.

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

回答3:

Shortened

If you have to access same things in HTML, use document.querySelectorAll().

#form > input[type='number']

Sum with Array#reduce()

In total

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>

来源：https://stackoverflow.com/questions/47948215/why-cant-i-do-addition-between-4-variables-in-javascript-but-i-can-do-it-with-3

标签

javascript

input

addition