Sumar con JavaScript de manera automática. En este pequeño articulo nos enfocaremos en la suma de variables utilizando el lenguaje JavaScript. Sin embargo, cuando programando una aplicación muy grande, es muy recomendable utilizar una y otra vez las mismas funciones o algoritmos.
Cuando unos rangos de instrucciones se repiten constantemente, el código fuente de la aplicación se pone algo cargado:
Las funciones son las estrategias más usadas para aligerar nuestros sistemas y da solución a todos estos problemas, tanto en JavaScript y resto de lenguajes de programación que estamos utilizando en nuestro proyecto. Definamos, una función es un grupo de códigos que se agrupan para realizar una acción específica y que se pueden usar constantemente.
Ahora, en esta serie de ejemplos, las instrucciones que suman los dos números o tres, dependiendo de nuestra necesidad.
Sumar con Javascript de manera automática
Ejemplo #01 Sumando con ciclo while
<html>
<head>
<title>Sumar en Javascript</title>
<script language="javascript">
var i=0;
var numero=0;
var misuma=0;
while(i<10){
if(numero%2==0){
misuma=misuma+numero;
i=i+1;
}
numero=numero+1;
}
document.write(misuma);
</script>
</head>
<body>
</body>
</html>
Ejemplo #02 Sumando con ciclo FOR
var numero=0;
for (var i=1; i<=10; i++)
if (i%2 == 0) {
numero += i;
}
document.write(numero);
Ejemplo #01 Ejercicio completo de suma automática
Un ejemplo completo de un formulario con 3 campos de texto tipo input, donde se ingresan valores numéricos.
Lo que haremos es que cuando ingresemos números enteros en cada campo se vaya sumando de manera automática.
Sin embargo, nos apoyaremos en el lenguaje JavaScript, sin necesidad de dar clic en ningún botón para su ejecución.
Les mostrare el código JavaScript que utilizaremos en este ejercicio.
<script type="text/javascript">
/* Funcion suma. */
function SumarAutomatico (valor) {
var TotalSuma = 0;
valor = parseInt(valor); // Convertir a numero entero (número).
TotalSuma = document.getElementById('MiTotal').innerHTML;
// Valida y pone en cero "0".
TotalSuma = (TotalSuma == null || TotalSuma == undefined || TotalSuma == "") ? 0 : TotalSuma;
/* Variable genrando la suma. */
TotalSuma = (parseInt(TotalSuma) + parseInt(valor));
// Escribir el resultado en una etiqueta "span".
document.getElementById('MiTotal').innerHTML = TotalSuma;
}
</script>
En este apartado mostraremos el HTML que necesitamos para armar el formulario a utilizar.
<div class="main"> <h1>Sumar de manera automática con javaScript</h1> <br> <span>Número #1</span> <input type="text" id="minumero1" onchange="SumarAutomatico(this.value);" /> <br/ > <span>Número #2</span> <input type="text" id="minumero2" onchange="SumarAutomatico(this.value);" /> <br/ > <span>Número #3</span> <input type="text" id="minumero3" onchange="SumarAutomatico(this.value);" /> <br/ > <br/ > <span>El resultado de la suma es: </span> <span id="MiTotal"></span> </div>
Aquí les mostraremos el código completo de este pequeño ejercicio.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sumar de manera automatica Javascript </title>
<script type="text/javascript">
/* Funcion suma. */
function SumarAutomatico (valor) {
var TotalSuma = 0;
valor = parseInt(valor); // Convertir a numero entero (número).
TotalSuma = document.getElementById('MiTotal').innerHTML;
// Valida y pone en cero "0".
TotalSuma = (TotalSuma == null || TotalSuma == undefined || TotalSuma == "") ? 0 : TotalSuma;
/* Variable genrando la suma. */
TotalSuma = (parseInt(TotalSuma) + parseInt(valor));
// Escribir el resultado en una etiqueta "span".
document.getElementById('MiTotal').innerHTML = TotalSuma;
}
</script>
<style type="text/css">
*{ font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif}
.main{ margin:auto; border:1px solid #7C7A7A; width:40%; text-align:left; padding:30px; background:#85c587}
input[type=submit]{ background:#6ca16e; width:100%;
padding:5px 15px;
background:#ccc;
cursor:pointer;
font-size:16px;
}
input[type=text]{ margin: 5px;
}
</style>
</head>
<body bgcolor="#bed7c0">
<div class="main">
<h1>Sumar de manera automática con javaScript</h1>
<br>
<span>Número #1</span>
<input type="text" id="minumero1" onchange="SumarAutomatico(this.value);" />
<br/ >
<span>Número #2</span>
<input type="text" id="minumero2" onchange="SumarAutomatico(this.value);" />
<br/ >
<span>Número #3</span>
<input type="text" id="minumero3" onchange="SumarAutomatico(this.value);" />
<br/ >
<br/ >
<span>El resultado de la suma es: </span> <span id="MiTotal"></span>
</div>
</body>
</html>
Espero que esta breve explicación despeje sus dudas en el manejo de sumas con JavaScript.
Otro ejemplo simple para sumar varios input
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sumar de manera automatica Javascript </title>
<script type="text/javascript">
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>
</head>
<body>
<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>
</body>
</html>
Ver Demo
Referencia
¿Cómo puedo poner el resultado en un input en vez de un spam?
Creo funciona no tan bien , si ingresas numeros mas de una vez en el primer input (sin pasar al otro input) va sumando o acumulando el resultado de este primer input.
El código tiene un error grave pues si cambio los valores ingresados en tiempo real, suma sobre el total anterior, me explico: si ponemos 1, 2 y 3 da como resultado 6, pero si cambiamos el 2 por un 1 da como resultado 7 WTF?! La solución es reiniciar cada vez que sume y pasar por todos los inputs recogiendo los valores.
¿Cómo podríamos solucionar eso? Gracias.