Resultado de una suma en tiempo real

sombra_cl · #1 (**permalink**) 08/08/2004, 18:39

Hola:
Si tengo 2 entradas para llenar con numeros, en un formulario:
<input type="text" name=numero1 size=2>
<input type="text" name=numero2 size=2> , y quiero hacer la suma de estos 2 numeros, pero que me aparesca el resultado de la suma inmediatamente, a medida que estoy ingresando los numeros, se puede???, gracias!!!!

soniagrande · #2 (**permalink**) 09/08/2004, 01:24

Lo que he hecho es que segun se van ingresando los numeros en los dos campos de texto muestra el resultado de la suma en un tercer campo

Estos son los campos:

Código:

<input type="text" name="numero1" size="2" onKeyUp="fncSumar()"/>
<input type="text" name="numero2" size="2" onKeyUp="fncSumar()"/>
<input type="text" name="resultado"/>

La funcion que realiza la suma es la siguiente:

Código:

function fncSumar(){
 var numero1 = Number(document.getElementById("numero1").value);
 var numero2 = Number(document.getElementById("numero2").value);
 document.getElementById("resultado").value = numero1+numero2;
}

sombra_cl · #3 (**permalink**) 09/08/2004, 08:08

Hola:
Es lo que necesitaba, pero algo esta mal , porque no rula:
<html>
<head> SUMA DE 2 NUMEROS</head>
<body>
<script>
function fncSumar(){
var numero1 = Number(document.getElementById("numero1").value);
var numero2 = Number(document.getElementById("numero2").value);
document.getElementById("resultado").value = numero1+numero2;
}
</script>
<form method="post" name="sumar">

Primer numero: <input type="text" name="numero1" size="2" onKeyUp="fncSumar()"/>
Segundo numero: <input type="text" name="numero2" size="2" onKeyUp="fncSumar()"/>
Resultado: <input type="text" name="resultado"/>
</form>
</body>
</html>

soniagrande · #4 (**permalink**) 10/08/2004, 00:31

He probado tu pagina en mi explorador y a mi me funciona correctamente, tanto con onKeyUp como con onkeyup. Quizas sea por la version del explorador, yo utilizo Internet Explorer 6.0.

No se me ocurre otra forma de hacerlo.

KarlanKas · #5 (**permalink**) 10/08/2004, 00:45

Vamos a probar con algo un poco más antiguo:

Código HTML:

<html>
<head> SUMA DE 2 NUMEROS</head>
<body>
<script>
function fncSumar(){
caja=document.forms["sumar"].elements;
var numero1 = Number(caja["numero1"].value);
var numero2 = Number(caja["numero2"].value);
resultado=numero1+numero2;
if(!isNaN(resultado)){
caja["resultado"].value=numero1+numero2;
}
}
</script>
<form method="post" name="sumar">

Primer numero: <input type="text" name="numero1" size="2" onKeyUp="fncSumar()"/>
Segundo numero: <input type="text" name="numero2" size="2" onKeyUp="fncSumar()"/>
Resultado: <input type="text" name="resultado"/>
</form>
</body>
</html>

Este código ha pasado la prueba del carbono14, es decir, funciona bien en Netscape 4.78, por lo que no creo que tengas problemas en ningún navegador posterior a este (y este es muy antiguo).

Saludos a los 2!!

sombra_cl · #6 (**permalink**) 10/08/2004, 07:33

Muchas gracias karlankas, ahora si funciono

KarlanKas · #7 (**permalink**) 10/08/2004, 08:17

De nada, pero el mérito es de Sonia. Yo sólo cambié un par de cosas...

Me alegro de que te funcionara

sombra_cl · #8 (**permalink**) 10/08/2004, 22:35

Muchas gracias para sonia tambien!!!
Bueno sin querer abusar de ustedes, les hago la ultima pregunta:

Resultado: <input type="text" name="resultado"/ onfocus="this.blur()">

Agrege para que no se puediera editar el resultado

, la cosa es que poder sumar 2 resultados distintos de 2 sumas distintas, mostrando de la misma forma el resultado, se podra???

KarlanKas · #9 (**permalink**) 10/08/2004, 23:28

Sería mejor que pusieras:

Resultado: <input type="text" name="resultado" readonly="readonly" />

¿No preferirías mostrar los dos resultados en 2 cajas distintas? No sería más entendible?

sombra_cl · #10 (**permalink**) 11/08/2004, 07:03

Si eso es lo que hago, mostrar 2 resultados en 2 cajas distintas, pero necesito sacar un total de esos 2 resultados y mostrarlo en otra caja, eso queria saber si habia alguna forma de hacerlo

sombra_cl · #11 (**permalink**) 12/08/2004, 08:08

No hay ninguna funcion que se apunte a que una caja sea llenada??, es decir en vez de onKeyUp, algo que identifique cuando una caja esta con variable??, no se podra hacer algo por ese lado????

sombra_cl · #12 (**permalink**) 12/08/2004, 09:40

Tambien podria ser de otra forma (pero no se como hacerlo en codigo):
tengo la 1 suma:
numero 1+ numero2=resultado1(esto va en una caja, como lo que hemos estado viendo)
otra suma distinta:
numero3+numero4=resultado2(esto va en otra caja)
ahora sumar numero1+numero2+numero3+numero4 y que se vea en otra caja distinta.Osea mientras se va anotando que los numeros en las distintas cajas que aparescan las sumas en sus cajas respectivas y a la vez en una 3, se entendio???, gracias

soniagrande · #13 (**permalink**) 13/08/2004, 00:35

Para no tener que poner la misma funcion dos veces en el codigo se puede modificar un poco, fncSumar la he modificado de forma que recibe 3 parametros: el nombre de la caja de texto con el primer numero de la suma, el nombre de la del segundo y el nombre de la caja de texto donde quieres mostrar la suma de estos dos numeros. Ademas cada vez que se actualiza alguno de los resultados parciales se llama a otra funcion fncSumarTotal que realiza la suma de los dos resultados parciales y la muestra en una tercera caja de texto:

Código HTML:

<html>
<head> SUMA DE 2 NUMEROS</head>
<body>
<script>
function fncSumar(caja1, caja2, destino){
caja=document.forms["sumar"].elements;
var numero1 = Number(caja[caja1].value);
var numero2 = Number(caja[caja2].value);
resultado=numero1+numero2;
if(!isNaN(resultado)){
	caja[destino].value=numero1+numero2;
	fncSumarTotal();
}
}

function fncSumarTotal(){
caja=document.forms["sumar"].elements;
var numero1 = Number(caja['resultado1'].value);
var numero2 = Number(caja['resultado2'].value);
resultado=numero1+numero2;
if(!isNaN(resultado)){
caja['resultado'].value=numero1+numero2;	
}
}
</script>
<form method="post" name="sumar">
<table>
<tr>
<td>
Primer numero: <input type="text" name="numero1" size="2" onKeyUp="fncSumar('numero1', 'numero2', 'resultado1')"/>
Segundo numero: <input type="text" name="numero2" size="2" onKeyUp="fncSumar('numero1', 'numero2', 'resultado1')"/>
Resultado parcial1: <input type="text" name="resultado1" readonly="readonly"/>
</td>
</tr>
<tr>
<td>
tercer numero: <input type="text" name="numero3" size="2" onKeyUp="fncSumar('numero3', 'numero4', 'resultado2')"/>
cuarto numero: <input type="text" name="numero4" size="2" onKeyUp="fncSumar('numero3', 'numero4', 'resultado2')"/>
Resultado parcial2: <input type="text" name="resultado2" readonly="readonly"/>
</td>
</tr>
<tr>
<td>
Resultado total: <input type="text" name="resultado" readonly="readonly"/>
</td>
</tr>
</table>
</form>
</body>
</html>

KarlanKas · #14 (**permalink**) 13/08/2004, 01:46

Podemos simplificar un poquito más la magnífica modificación de soniagrande:

Código HTML:

<html>
<head> SUMA DE 2 NUMEROS</head>
<body>
<script>
function fncSumar(caja1, caja2, destino){
caja=document.forms["sumar"].elements;
var numero1 = Number(caja[caja1].value);
var numero2 = Number(caja[caja2].value);
resultado=numero1+numero2;
if(!isNaN(resultado)){
	caja[destino].value=numero1+numero2;
if(caja1!="resultado1"){fncSumar('resultado1','resultado2','resultado');}	
}

}


</script>
<form method="post" name="sumar">
<table>
<tr>
<td>
Primer numero: <input type="text" name="numero1" size="2" onKeyUp="fncSumar('numero1', 'numero2', 'resultado1')" />
Segundo numero: <input type="text" name="numero2" size="2" onKeyUp="fncSumar('numero1', 'numero2', 'resultado1')"/>
Resultado parcial1: <input type="text" name="resultado1" readonly="readonly"/>
</td>
</tr>
<tr>
<td>
tercer numero: <input type="text" name="numero3" size="2" onKeyUp="fncSumar('numero3', 'numero4', 'resultado2')" />
cuarto numero: <input type="text" name="numero4" size="2" onKeyUp="fncSumar('numero3', 'numero4', 'resultado2')" />
Resultado parcial2: <input type="text" name="resultado2" readonly="readonly"/>
</td>
</tr>
<tr>
<td>
Resultado total: <input type="text" name="resultado" readonly="readonly"/>
</td>
</tr>
</table>
</form>
</body>
</html>

Un saludo a los dos!

sombra_cl · #15 (**permalink**) 13/08/2004, 08:33

Muchisimas gracias!!!!.....no se que haria sin ustedes

Senic · #16 (**permalink**) 28/05/2008, 15:35

Una pregunta, y en vez de utilizar campos de texto en las variables de la suma, para utilizar un select con diferentes opciones como se podria hacer?

Y para que el resultado no aparezca en un campo de formulario?

Muchas gracias!

isisunicornio · #17 (**permalink**) 24/05/2016, 12:57

Hola como estan

se que es un tema viejo, pero alguien me podria orientar como le puedo hacer para agregar mas operaciones y no solo la suma de dos campos, gracias