Consiste en sumar automáticamente el valor escrito en una serie de inputs
identificados con la clase monto.
Cada vez que presionas una tecla dentro del input
se genera el evento onkeyup
, el cual llama a una función denominada suma
.
La función suma
obtiene todos los elementos con la clase monto
en forma de arreglo; este arreglo se recorre mediante un each para acceder al atributo value
de cada input
y si el contenido del value
tiene un número válido, entonces se añade su valor al contador total, si el contenido del value
no es válido, entonces se añade un cero al contador total.
Al finalizar el recorrido, el valor del contador se muestra en el elemento identificado con el id spTotal.
function sumar() {
var total = 0;
$(".monto").each(function() {
if (isNaN(parseFloat($(this).val()))) {
total += 0;
} else {
total += parseFloat($(this).val());
}
});
//alert(total);
document.getElementById('spTotal').innerHTML = total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<span>Valor #1</span>
<input type="text" id="txt_campo_1" class="monto" onkeyup="sumar();" />
<br/>
<span>Valor #2</span>
<input type="text" id="txt_campo_2" class="monto" onkeyup="sumar();" />
<br/>
<span>Valor #3</span>
<input type="text" id="txt_campo_3" class="monto" onkeyup="sumar();" />
<br/>
<span>El resultado es: </span> <span id="spTotal"></span>