Erro no calculo do javascript

Front-end JavaScript
#1

Preciso de uma ajuda com javascript.

Eu tenho um código que gera dinamicamente vários inputs. E tenho uma função que deveria somar o valor informado dentro dos inputs. O problema é que ao invés de somar ele concatena os campos. O estranho é que fiz o mesmo processo em outro lugar e funciona a soma. Não consegui enxergar o que fiz errado. Segue abaixo o código javascript:

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();

Esse outro trecho do código está num for e gera os campos que preciso:

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

E esse é o trecho do código que deveria armazenar a soma:

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

Mas ao preencher o valor de uns 3 inputs com os valores de 1,2 e 3, por exemplo, no Total de pares não aparece 6 e sim 0123. Parece que está concatenando ao invés de somar. Alguém sabe dizer?

#2

Por padrão, o value de qualquer input, select ou textarea é string…

Sempre que precisar calcular algo, converta para int ou float…

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

Se for monetário/moeda (ponto flutuante), use:

var valor = parseFloat(document.getElementById("id").value);
#3

Nessa parte, o valor da propriedade quant_produto[i].value é do tipo string
Quando você usa o operador +=, o JS converte a variável calc_quant_total_produto para string, por isso o “0” antes do 123 final.

Você pode converter o valor da propriedade quant_produto[i].value para number usando parseInt ou parseFloat, igual o @rodevops falou.

Por exemplo:

for(var i=0;i<tam_grade_produto.length;i++){
  calc_quant_total_produto += parseInt(quant_produto[i].value, 10);
}
//Usando radix (base) 10, no segundo parâmetro do método parseInt

Mas antes disso, acredito que seria bom verificar se o valor dos campos #quant_produto são números válidos

1 curtida
#4

Para isso @BrunoLeonardo, você pode usar a função isNaN…

#5

Deu certo o parseInt. Mas também precisei colocar um value=0 no HTML. Isso porque não quero obrigar a pessoa a digitar um valor obrigratoriamente. Eu havia resolvido já, mas quando entrei aqui já havia a resposta. Muito obrigado pelo ajuda.