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

Question

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>

I edited the question, I didn't have intention to post it in that moment, it was a mistake, sorry. — Pier, Dec 22 '17 at 22:57
You've given two elements an id of "b", which is illegal. I don't know how that would cause this issue, but fix that first. — Carcigenicate, Dec 22 '17 at 22:59
You have duplicate IDs: `"b"` is both the ID of the input and the button => wrong — ibrahim mahrir, Dec 22 '17 at 22:59
I would expect the code you posted to cause a parsing error. I wouldn't expect this to even give output. — Carcigenicate, Dec 22 '17 at 23:00
By the way, JavaScript will have issues calculating the addition and subtraction of Floating Point Numbers. To correct the issue you should multiply each number by `Math.pow(10, 17)`, then, after the addition, divide by `Math.pow(10, 17)` times how many times you used the `Math.pow(10, 17)` in the addition, to bring about your Floating Point result. I would store `Math.pow(10, 17)` in a var so you JavaScript doesn't have to calculate that again. — StackSlave, Dec 22 '17 at 23:24

zfrisch · Accepted Answer · 2017-12-22T23:12:17.813

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>

_This is a pretty powerful example as to why you should never duplicate an id._ Or a great example of why you should favor classes over IDs, and verbose names. BEM anyone? — ryanpcmcquen, Dec 22 '17 at 23:41

Ivan86 · Answer 2 · 2017-12-22T23:21:53.567

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

score 0 · Answer 3 · answered Dec 23 '17 at 00:08

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>

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

3 Answers3

Linked