Skip to main content
1 de 4

calcular o preço e quantidade de um input number e exibir resultado em tempo real

Bom Dia,

Estou com um problema talvez simples de resolver mas estou meio enferrujada,

Preciso multiplicar o valor do input(preço) com o input-number(quantidade) e jogar o resultado em outro campo input(total) em tempo real. Ou seja preciso calcular o valor de preço e quantidade quando clicasse no input-number para aumentar a quantidade ele já ia realizando a conta e jogava no campo total em tempo real.

Meu código está assim:

<script>
 

    function calcular(){
        var valor1 = parseInt(document.getElementById('preco').value, 10);
        var valor2 = parseInt(document.getElementById('quantidade').value, 10);
    
    
        document.getElementById('total').value = num1 + num2;
    }

  </script>

os campos:

 <input type="text" id="preco" name="preco" class="form-control" placeholder="Preco" value="" required onfocus="calcular()">
                  
  <input type="number" name="quantidade" id="quantidade" class="form-control"  value="" placeholder="" min="0"  max="" onblur="calcular()">
                  
  <input type="text" name="total" id="total" class="form-control" placeholder="">
              

Então o que eu queria era que ao clicar para aumentar a quantidade do produto no input-number, ele já realizasse a multiplicação e jogava o valor total no input total em tempo real.

imagem