0

Eu tenho um código que gera dinamicamente vários inputs. Além disso 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.

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

O código abaixo está dentro de um for e gera 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>
</tr>

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?

0

2 Respostas 2

1

O seu código está um pouco confuso, mas vamos ver um exemplo do porquê uma soma pode não funcionar com JavaScript.

O primeiro ponto que merece destaque é que quando pegamos o value com JavaScript ele retornará uma string. Para converter para um integer e poder somar numericamente esse valores você precisará usar uma função chamada parseInt().

Veja esse exemplo sem o 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>

Ao digitar, por exemplo, 10 no primeiro campo, 10 no segundo e terceiro teremos o valor: 101010. O que aconteceu é que ele concatenou as strings, não somou.

Agora veja esse exemplo com o 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>

Veja, ao somar 10 + 10 + 10 temos o resultado como 30, que seria o correto.

Com base no seu código você poderia editar essa parte para um parseInt().

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

Além do parseInt() há também o parseFloat() para números que não são inteiros.

Referências:

6
  • 1
    Aconselho a trocar as referências para a MDN que é mais confiável: parseInt e parseFloat. Vale lembrar também que é importante passar o segundo parâmetro para o parseInt para evitar inconsistência de implementação dos navegadores. Commented 6/09/2018 às 12:27
  • Deu certo colocando o parseInt() ao somar o valor. Mas precisei também colocar um value padrão no html também pois acho que o somatório ficava nulo ao somar algum campo que ficava em branco. <input size="3" class="form-control" id="quant_produto" type="number" onchange="preencheTotalProduto()" min="1" max="<?= $tamanho['estoque'];?>" value="0">
    – Bruno
    Commented 6/09/2018 às 12:29
  • @Bruno, você poderia fazer uma pequena validação antes com o JavaScript para ver se os campos foram realmente preenchidos. Além disso a questão do value="0" pode resolver, se os campos não são obrigatórios. Commented 6/09/2018 às 12:31
  • Mas alguns campos realmente não precisam ser preenchidos obrigatoriamente. Aqui pra mim a questão está resolvida. Mas não sei marcar o tópico como solucionado.
    – Bruno
    Commented 6/09/2018 às 12:34
  • @Bruno, caso a resposta tenha resolvido o seu problema você pode marcar como aceita clicando no V verdinho do lado dos pontos da escolhida. Caso queira, pode dar um voto positivo também. Commented 6/09/2018 às 12:46
0

Possivelmente os valores são do tipo 'text', por isso a concatenação .

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

Caso queria converter para decimal, use: parseFloat()

3
  • 1
    Exato e vale lembrar @Bruno que você está pegando selectorAll de "id" e id não se repete, em vez disso use class Commented 6/09/2018 às 11:39
  • Não entendi o que você disse sobre "id" não se repete. No trecho do código que mostrei está dentro de um loop que gera vários inputs com o mesmo id, então ele se repete sim, por isso o uso do selectorAll. Só não postei aqui o código html inteiro que foi gerado. E o uso do parseInt não deu certo. Ainda não consegui entender porque.
    – Bruno
    Commented 6/09/2018 às 11:55
  • O id é usado para identificar apenas 1 elemento enquanto classe é para vários, de uma olhada tableless.github.io/iniciantes/manual/css/class-id.html ou pode consultar o próprio w3 @Bruno Pode funcionar aí, mas vai ter situações em que ele não funcionará, já passei por diversas, ele vai pegar sempre o ultimo elemento com o mesmo id, no seu caso ele pegou todos com aquele id e assim pega mesmo, mas caso você utilize o byId já daria confusão então comece a ver a diferença entre classe e id Commented 6/09/2018 às 12:02

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .