Error while adding javascript

Question

I have a code that dynamically generates several inputs. In addition I have a function that should add the value informed within the inputs. The problem is that instead of adding it together it concatenates the fields. The strange thing is that I did the same process elsewhere and the sum works.

Javascript code:

var tam_grade_produto = document.querySelectorAll("#tam_grade_produto");
var quant_produto = document.querySelectorAll("#quant_produto");

var quant_total_produto = document.querySelector("#quant_total_produto").value;

function preencheTotalProduto(){
  var calc_quant_total_produto = 0;
  for(var i=0;i<tam_grade_produto.length;i++){
    calc_quant_total_produto += quant_produto[i].value;
  }
  quant_total_produto.textContent = calc_quant_total_produto;
}

document.addEventListener("onchange",function(event){
    event.preencheTotalProduto();
});

preencheTotalProduto();

The code below is inside a for and generates fields I need:

<tr>
    <td><kbd><label id="tam_grade_produto"><?= $tamanho['tamanho']; ?></label></kbd></td>
    <td><input size="3" class="form-control" id="quant_produto" type="number" onchange="preencheTotalProduto()" min="1" max="<?= $tamanho['estoque']; ?>"></td>
    <td><input size="3" readonly="true" class="form-control" type="number" onchange="preencheTotalProduto()" value="<?= $tamanho['estoque']; ?>"></td>
</tr>

And that’s the chunk of code that should hold the sum:

<div>Total de pares: <label id="quant_total_produto">0</label></div>

But when filling the value of a 3 inputs with the values of 1, 2 and 3, for example, in the total of pairs does not appear 6 but 0123. It feels like it’s concatenating instead of adding up. Does anyone know how to say?

Answer 1

Your code is a bit confusing, but let’s see an example of why a sum might not work with Javascript.

The first point worth highlighting is that when we catch the value with Javascript it will return a string. To convert to a integer and can numerically sum these values you will need to use a function called parseInt().

Take this example without the parseInt():

function somarValores() {
  let s1 = document.getElementById("txt1").value;
  let s2 = document.getElementById("txt2").value;
  let s3 = document.getElementById("txt3").value;
  let resposta = (s1 + s2 + s3);
  alert(resposta);
}

<fieldset>
  <legend>Cálculo de soma sem utilizar o parseInt</legend>
  <p>
    <label>Valor 1:</label>
    <input id="txt1" type="number" />
  </p>
  <p>
    <label>Valor 2: </label>
    <input id="txt2" type="number" />
  </p>
  <p>
    <label>Valor 3: </label>
    <input id="txt3" type="number" />
  </p>
  <button id="somar" onclick="somarValores()">Somar</button>
</fieldset>

By typing, for example, 10 in the first field, 10 in the second and third we will have the value: 101010. What happened is that he concatenou as strings, did not add.

Now look at this example with the parseInt():

function somarValores() {
  let s1 = parseInt(document.getElementById("txt1").value);
  let s2 = parseInt(document.getElementById("txt2").value);
  let s3 = parseInt(document.getElementById("txt3").value);
  let resposta = (s1 + s2 + s3);
  alert(resposta);
}

<fieldset>
  <legend>Cálculo de soma utilizando o parseInt</legend>
  <p>
    <label>Valor 1:</label>
    <input id="txt1" type="number" />
  </p>
  <p>
    <label>Valor 2: </label>
    <input id="txt2" type="number" />
  </p>
  <p>
    <label>Valor 3: </label>
    <input id="txt3" type="number" />
  </p>
  <button id="somar" onclick="somarValores()">Somar</button>
</fieldset>

See, by adding 10 + 10 + 10 we have the result as 30, which would be correct.

Based on your code you could edit this part for a parseInt().

calc_quant_total_produto += parseInt(quant_produto[i].value);

Beyond the parseInt() there is also the parseFloat() for numbers that are not integers.

References:

• parseint()
• parseFloat()

Answer 2

Possibly the values are of the type 'text', therefore the concatenation .

for(var i=0;i<tam_grade_produto.length;i++){
  var quantProduto = parseInt(quant_produto[i].value);
  calc_quant_total_produto+= quantProduto;
}

If you wanted to convert to decimal, use: parseFloat()