1

Tenho uma tabela html de 3 colunas, as 2 primeiras são <input type="number"> e a terceira é texto.

Quero jogar na terceira a soma dos valores dos inputs utilizando o onchange, mas o que estou enfrentando é que se eu coloco "2" em cada input, a soma na terceira coluna é 6, pois o valor anterior do input influencia no resultado final.

Como faço para resolver este problema??

Abaixo meu código.

<table>
  <tr>
    <td>valor 1</td>
    <td>valor 2</td>
    <td>total</td>
  </tr>
  <tr>
    <td><input type="number" min="0" onchange="calcula(this.value)"></td>
    <td><input type="number" min="0" onchange="calcula(this.value)"></td>
    <td><input type="text" readonly value="0" id="teste"></td>
  </tr>
</table>

<script type="text/javascript">
  function calcula(valor){
    var soma = parseInt(document.getElementById("teste").value);
    soma += parseInt(valor);
    document.getElementById("teste").value = soma;
}
</script>

1 Resposta 1

3

Se o terceiro input é a soma dos outros não faz sentido somar incluindo o total que é o que isto faz:

var soma = parseInt(document.getElementById("teste").value);

Sugiro retirar isso e ir ao DOM procurar por todos os elementos:

function calcula() {
    var inputs = document.querySelectorAll('input[type="number"]');
    var soma = 0;
    for (var i = 0; i < inputs.length; i++) {
        soma += parseInt(inputs[i].value) || 0;
        document.getElementById("teste").value = soma;
    }
}

jsFiddle: http://jsfiddle.net/x30n7rvg/

Outra maneira, que eu prefiro por separar o JS do HTML, e poupar funções globais é:

(function () {
    var inputs = [].map.call(document.querySelectorAll('table tr input[type="number"]'), function (input) {
        input.addEventListener('change', calcula);
        return input;
    });

    function calcula() {
        var soma = inputs.reduce(function (soma, input) {
            var nr = parseInt(input.value) || 0;
            return soma + nr;
        }, 0);
        document.getElementById("teste").value = soma;
    }
})();

jsFiddle: http://jsfiddle.net/38sway5d/

Neste ultimo exemplo o código vai ao DOM buscar os inputs quando a página carrega e depois trabalha a partir da memória a iterar os elementos.

Usei [].map.call() para converter a lista de inputs numa array e depois poder usar o reduce que perfeito para estes caso de somatório.

Repara ainda que usei var nr = parseInt(input.value) || 0; para contar 0 caso o input não tenha valor.

1
  • 1
    Obrigado pelas dicas. tentarei usar e, se necessário, adaptar para uma tabela dinâmica que tenho.
    – Edson
    Commented 9/07/2015 às 19:42

Você deve fazer log-in para responder a esta pergunta.

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