1

Estava dando uma lida em alguns tutoriais e vi uma função em JavaScript para somar dois inputs e mostrar em tempo real. Ele funciona perfeitamente.

Porém, eu gostaria de usar ele para multiplicar os valores, entretanto não consegui modificar a função, de modo que quando faço alterações no código recebo um erro.

function Soma(){
    var soma = 0;
    var ipts = document.querySelectorAll('input[oninput="Soma()"]');
    for(var x=0; x<ipts.length; x++){
       var valorItem = parseFloat(ipts[x].value);
       !isNaN(valorItem) ? soma += parseFloat(valorItem) : null;
    }
    document.querySelector('#final').value = soma.toFixed(2);
}
<form action="">
  Total produto1: <input type="text" oninput="Soma()" value="0"><br>
  Total produto2: <input type="text" oninput="Soma()" value="0"><br>
  <br>
  Total todos os produtos: <input type="text" id="final">
</form>

2 Respostas 2

1

Fiz uma mudança para ele multiplicar, mas se quiser fazer as outras operações terá que melhorar sua função.

function Soma(){
    var soma = 0;
    var ipts = document.querySelectorAll('input[oninput="Soma()"]');
    for(var x=0; x<ipts.length; x++){
       var valorItem = parseFloat(ipts[x].value);
       if(soma ===0)
          soma = valorItem;
       else{
         !isNaN(valorItem) ? soma *= parseFloat(valorItem) : null;
         console.log(soma);
       }
    }
    document.querySelector('#final').value = soma.toFixed(2);
}
 <form action="">
  Total produto1: <input type="text" oninput="Soma()" value="0"><br>
  Total produto2: <input type="text" oninput="Soma()" value="0"><br>
  <br>
  Total todos os produtos: <input type="text" id="final">
 </form>

3
  • Obrigado mesmo, me salvou!!! Commented 6/03/2019 às 2:47
  • So alterando o sinal nao estava adiantando, quando estava fazendo as modificacoes. Commented 6/03/2019 às 2:48
  • Então estava acontecendo isso por que qualquer valor multiplicado por 0 é 0, então ele nunca iria multiplicar por outro valor alem do zero, por isso inicializei ele anteriormente com o if ai funcionou.
    – Lodi
    Commented 6/03/2019 às 2:49
1

O problema é que você estava usando o operador de adição (+=). Para multiplicar, você deve usar o operador de multiplicação (*=).

Pode até simplificar o seu código, se quiser:

const fields = document.querySelectorAll('.field')
const total = document.querySelector('#total')

function multiply() {
  let product = 1

  fields.forEach((field) => {
    let num = parseInt(field.value, 10)
    product *= isNaN(num) ? 1 : num
  })

  total.textContent = product
}

fields.forEach((field) => field.addEventListener('input', multiply))
<input type="number" class="field" />
<input type="number" class="field" />

<div>
  Total: <span id="total"></span>
</div>

Para saber mais, sugiro que consulte as páginas referentes aos operadores de adição e multiplicação.

1
  • Luiz Felipe, eu fiz a alteracao dos sinais, porem nao estava dando certo aqui no meu codigo. eu agradeço as respostas. Muito Obrigado pessoal!! Commented 6/03/2019 às 2:54

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 .