Portada » JavaScript » Sumar con Javascript de manera automática

Sumar con Javascript de manera automática

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.

Sumar con Javascript de manera automática
Sumar con Javascript de manera automática

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

Sumar Funciones

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

4 comentarios en “Sumar con Javascript de manera automática”

  1. 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.

  2. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad