Javascript: Sum of amounts in real time

0

introducir el código aquí I have the following function that works to add the amounts in inputs that have the class monto_cierre :

function sumamodal() {
// Para suma de montos de cierre
var total = 0;
    $(".monto_cierre").each(function () {
        var valorunp_v = $(this).val();
        valorunp_v = valorunp_v.replace(simbolo, '');
        valorunp_v = valorunp_v.replace(/\./g,'');
        valorunp_v = valorunp_v.replace(',', '.');
        valorunp_v = valorunp_v*100;
        valorunp_v = valorunp_v/100;
        valorunp_v = parseFloat(valorunp_v +0);

        if (isNaN(parseFloat(valorunp_v))) {
            total += 0;
        } else {
            total += parseFloat(valorunp_v);
        }
    });

    total = total*100;
    total_fixed = total.toFixed(2);
    total_fixed = parseFloat(total_fixed + 0);
    document.getElementById('total_cierre').value = total_fixed;
}

The command to execute in this way:

var intevalo = setInterval('sumamodal()',10);

This so you can do the sum of amounts in real time while they are entering the screen showing the total in a input . It happens that I have seen that the consumption of memoria ram in the tab where this function is running is increasing progressively, until the point where the page gives error (This after a good time). The idea is if you can optimize this method and if there is another one so that the amounts are added in real time.

    
asked by Kinafune 03.11.2018 в 16:57
source

2 answers

1

Easy, just pass keyup to selectors with class monto_cierre and invoke the function. I leave you an example working.

You do not need the setInterval since the keyup adds it in real time (To the key) P.S. I removed the line valorunp_v = valorunp_v.replace(simbolo, ''); Because I do not know where you get simbolo

function sumamodal() {
// Para suma de montos de cierre
var total = 0;
    $(".monto_cierre").each(function () {
        var valorunp_v = $(this).val();
        valorunp_v = valorunp_v.replace(/\./g,'');
        valorunp_v = valorunp_v.replace(',', '.');
        valorunp_v = valorunp_v*100;
        valorunp_v = valorunp_v/100;
        valorunp_v = parseFloat(valorunp_v +0);

        if (isNaN(parseFloat(valorunp_v))) {
            total += 0;
        } else {
            total += parseFloat(valorunp_v);
        }
    });

    total = total*100;
    total_fixed = total.toFixed(2);
    total_fixed = parseFloat(total_fixed + 0);
   $('#total_cierre').val(total_fixed);
}

$(document).on('keyup','.monto_cierre',function(){
  sumamodal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="monto_cierre"><br>
<input type="text" class="monto_cierre"><br>
<input type="text" class="monto_cierre"><br>
<input type="text" class="monto_cierre"><br>
<input type="text" id="total_cierre" readonly><br>
    
answered by 03.11.2018 / 18:35
source
0

To do that it's better to use addEventListener , I'll give you an example.

The HTML:

<!--Tus inputs ".monto_cierre"-->
<input type="number" class="monto_cierre" >
<input type="number" class="monto_cierre" >
<input type="number" class="monto_cierre" >
<input type="number" class="monto_cierre" >

<!-- El total -->
<input type="number" class="total_cierre" >

Now we will use javascrip to add an event input or keyup , I will use keyup for this example.

Here the Javascript:

//Usamos jQuery para seleccionar y recorrer cada uno de los elementos input con la clase 'monto_cierre'
$('.monto_cierre').each(function(){
    //Añadimos el manejador del  evento, nótese que para añadir el manejador del evento estoy usando javascript puro, sin embargo también es posible usar jQuery
    //$(this).on('keyup', function(){});
    this.addEventListener('keyup', function(){
        //Aquí ejecuta la función 'sumamodal'
        sumamodal();
    }, false);
});

Now every time you type in any of the input.monto_cierre , your function sumamodal will be executed, instead of running every 10 thousandths of a second.

    
answered by 03.11.2018 в 18:13