Multiplication and sum of inputs in a site [closed]

Question

Multiplication and sum of inputs in a site [closed]

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I am building a website and I need help: I have 3 fields in this site (input) and each one represents a fixed value (1,500, 250 and 500), I would like to be able to insert in these fields the amount of times I want this value to make the sum and the result is presented without the need to load the page:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Orçamento</title>
</head>
<body>
    <div>
        <h1 class="titulo">Orçamento</h1>
    </div>
    <div>
        Quantidade item 1 =
        <input type="number" name="campoUm" id=""> 
        x R$ <var id="valorUm">1500</var> = 
    </div>
    <div>
        Quantidade item 2 =
        <input type="number" name="campoDois" id="">
        x R$ <var id="valorDois">250</var> =
    </div>
    <div>
        Quantidade item 3 =
        <input type="number" name="campoTres" id=""> 
        x R$ <var id="valorTres">500</var> =
    </div>
    <div>
        Total =
    </div>
</body>
</html>

Can you help me?

javascript html

asked by anonymous 06.04.2018 / 02:54

3 answers

0

You can get the value of the variables using javascript , either id , name or class , with the last two options being able to return 1 array since the screen can have more than 1 item with the same name or class.

In the example I created I got the items by id , after that I checked them if they are numeric and, if they are not, it assigns the value 0 to them. After that I did the calculation and finally assign the values of the calculation on the screen through the element html <span> (for that I gave 1 id for each).

In order for the calculation to be done each time the value of inputs were changed, I threw the code in a function and call that function in the onchange event, that is, every time the value is changed:

    function somaTudo(){

        var valorUm = parseInt(document.getElementById("campoUm").value)
        var valorDois = parseInt(document.getElementById("campoDois").value)
        var valorTres = parseInt(document.getElementById("campoTres").value)
        
        if(isNaN(valorUm))
        valorUm = 0

        if(isNaN(valorDois))
        valorDois = 0

        if(isNaN(valorTres))
        valorTres = 0

        var TotalUm = (valorUm * 1500);
        var TotalDois = (valorDois * 250);
        var TotalTres = (valorTres * 500);

        document.getElementById("TotalCampoUm").innerHTML= TotalUm;
        document.getElementById("TotalCampoDois").innerHTML = TotalDois;
        document.getElementById("TotalCampoTres").innerHTML = TotalTres;
        document.getElementById("Total").innerHTML = (TotalUm + TotalDois + TotalTres);
    }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Orçamento</title>
</head>
<body>
    <div>
        <h1 class="titulo">Orçamento</h1>
    </div>
    <div>
        Quantidade item 1 =
        <input onchange="somaTudo()" type="number" min="0" name="campoUm" id="campoUm"> 
        x R$ <var id="valorUm">1500</var> = <span id="TotalCampoUm"></span>
    </div>
    <div>
        Quantidade item 2 =
        <input onchange="somaTudo()" type="number" min="0" name="campoDois" id="campoDois">
        x R$ <var id="valorDois">250</var> =<span id="TotalCampoDois"></span>
    </div>
    <div>
        Quantidade item 3 =
        <input onchange="somaTudo()" type="number" min="0" name="campoTres" id="campoTres"> 
        x R$ <var id="valorTres">500</var> =<span id="TotalCampoTres"></span>
    </div>
    <div>
        Total = <span id="Total"></span>
    </div>
</body>
</html>

06.04.2018 / 03:53

0

A practical and real-time way is to create events at inputs , which updates the value as the fields change. You do not need id s.

For this I put the tag <var id="total"></var> to receive the value of the sum:

var qtd = document.body.querySelectorAll("input[type='number']");
for(var x=0; x<qtd.length; x++){
   qtd[x].addEventListener("input", function(){
      var vals = document.body.querySelectorAll("var[id*='valor']");
      var soma = 0;
      
      for(var y=0; y<vals.length; y++){
         soma += parseFloat(vals[y].textContent)*vals[y].parentNode.querySelector("input").value;
      }

      if(!isNaN(soma)) document.body.querySelector("#total").textContent = soma;
   });
}

<div>
   <h1 class="titulo">Orçamento</h1>
</div>
<div>
   Quantidade item 1 =
   <input type="number" name="campoUm">
   x R$ <var id="valorUm">1500</var> = 
</div>
<div>
   Quantidade item 2 =
   <input type="number" name="campoDois">
   x R$ <var id="valorDois">250</var> =
</div>
<div>
   Quantidade item 3 =
   <input type="number" name="campoTres">
   x R$ <var id="valorTres">500</var> =
</div>
<div>
   Total = <var id="total"></var>
</div>

06.04.2018 / 04:22

How to get '#' from Angular URLs event.preventDefault () for attachment with php and js [duplicate]

score 1 · Accepted Answer

Good evening.

You can use jQuery to make it easier to manipulate some HTML elements. With all due respect, I took the liberty of adjusting a few things in your code. Please see if the example below helps you in any way.

Explanation : For each field where the user types the value, I created two functions in jQuery, one for the keyUp event (after it finishes pressing any key) and another is the change function (if the user clicks the up or down arrow, which is inside the field).   The idea is that every time you enter a value in any of the three fields, the script is taking the value of all fields and multiplying by the fixed value that is defined in the VAR tags. Finally, you are adding up all the results of the multiplications and displaying the total value in the ValueTotal tag
  To help you, if you need to get the full value of the purchase, there is a input type = hidden field with the ID and name equal to the valueTotalCompra , if you send this value to another page that will process the payment

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><title>Orçamento</title></head><body><div><h1class="titulo">Orçamento</h1>
</div>
<div>
    Quantidade item 1 =
    <input type="number" name="campoUm" id="campoUm"> 
    x R$ <var id="valorUm">1500</var> = <var id="resultado1"></var>
</div>
<div>
    Quantidade item 2 =
    <input type="number" name="campoDois" id="campoDois">
    x R$ <var id="valorDois">250</var> = <var id="resultado2"></var>
</div>
<div>
    Quantidade item 3 =
    <input type="number" name="campoTres" id="campoTres"> 
    x R$ <var id="valorTres">500</var> = <var id="resultado3"></var>
</div>
<div>
    Total = <var id="valorTotal"></var>
    <input type="hidden" name="valorTotalCompra" id="valorTotalCompra" value="" />
</div>
<script type="text/javascript">
    $(document).ready(function(){

        //exemplo utilizando jQuery
        $(document).on('keyup','#campoUm',function(){
            let total1 = $('#'+this.id+'').val() * $('#valorUm').text();
            let total2 = $('#campoDois').val() * $('#valorDois').text();
            let total3 = $('#campoTres').val() * $('#valorTres').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado1').empty();
            $('#resultado1').html('R$ '+total1);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('change','#campoUm',function(){
            let total1 = $('#'+this.id+'').val() * $('#valorUm').text();
            let total2 = $('#campoDois').val() * $('#valorDois').text();
            let total3 = $('#campoTres').val() * $('#valorTres').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado1').empty();
            $('#resultado1').html('R$ '+total1);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('keyup','#campoDois',function(){
            let total2 = $('#'+this.id+'').val() * $('#valorDois').text();
            let total1 = $('#campoUm').val() * $('#valorUm').text();
            let total3 = $('#campoTres').val() * $('#valorTres').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado2').empty();
            $('#resultado2').html('R$ '+total2);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('change','#campoDois',function(){
            let total2 = $('#'+this.id+'').val() * $('#valorDois').text();
            let total1 = $('#campoUm').val() * $('#valorUm').text();
            let total3 = $('#campoTres').val() * $('#valorTres').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado2').empty();
            $('#resultado2').html('R$ '+total2);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('keyup','#campoTres',function(){
            let total3 = $('#'+this.id+'').val() * $('#valorTres').text();
            let total1 = $('#campoUm').val() * $('#valorUm').text();
            let total2 = $('#campoDois').val() * $('#valorDois').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado3').empty();
            $('#resultado3').html('R$ '+total2);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('change','#campoTres',function(){
            let total3 = $('#'+this.id+'').val() * $('#valorTres').text();
            let total1 = $('#campoUm').val() * $('#valorUm').text();
            let total2 = $('#campoDois').val() * $('#valorDois').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado3').empty();
            $('#resultado3').html('R$ '+total2);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

    });

</script>
</body>
</html>