Error doing the sum with javascript

Navigation
0

I have a code that dynamically generates several inputs . Also I have a function that should add the value entered into the inputs . The problem is that instead of adding 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 within a for and generates fields that 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 this is the snippet of code that should hold the sum: 

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

But when filling in the value of a 3 inputs with values of 1, 2 and 3, for example, in the total of pairs does not appear 6 and yes 0123. It seems that it is concatenating instead of adding. Anyone know how to say?

    
asked by anonymous 06.09.2018 / 13:32

2 answers

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 mentioning is that when we get value with JavaScript it will return a string . To convert to an integer and you can sum this values numerically you will need to use a function called parseInt() .

See this example without 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>

When typing, for example, 10 in the first field, 10 in the second and third we will have the value: 101010. What happened is that it concatenated strings , not added.

Now look at this example with 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>

Look, by adding 10 + 10 + 10 we get the result as 30, which would be the correct one.

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

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

In addition to parseInt() there is also parseFloat() for numbers that are not integers.

References:

06.09.2018 / 13:58
0

Possibly values are of type ' text ', so 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 ()

    
06.09.2018 / 13:38
How do I enter new data for prediction (text)? How to create search in Laravel getting cache data?