Hacer sumas Javascript

marinamarina · #1 (**permalink**) 09/01/2015, 12:03

Hola

Soy nueva en todo esto del javascript, hace poco comence un cursillo y en los deberes que tengo que hacer estoy atascada con una suma que tenemos que hacer y no encuentro el error.
Adjunto lo que he hecho hasta ahora, si alguien me pudiera ayudar, os estaria muy agradecida.

Gracias

Marina

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script language="javascript">
var num1=document.getElementById("n1").value
var num2=document.getElementById("n2").value
if (isNaN("num1")){
alert("ERROR: introduce un numero valido")
}else{
numero1=parseFloat(num1)
numero2=parseFloat(num2)
$("suma").click(function(){
suma=numero1+numero2
var respsu=suma
document.write("La suma es " + numero1 + " + " + numero2 + " = " + respsuma)
})
$("resta").click(function(){
resta=numero1-numero2
var resprest=resta
document.write("La resta es " + num1 + " - " + num2 + " = " + resprest)
});
}
</script>
</head>

<form>
<p>
<label for="n1">1 er número:</label>
<input type="text" name="n1" id="n1">
</p>
<p>
<label for="n2">2º número::</label>
<input type="text" name="n2" id="n2">
</p>
<p>
<input type="button" name="suma" id="suma" value="Sumar n1+n2">
<input type="button" name="resta" id="resta" value="Restar n1-n2">
</p>
</form>
</body>
</html>

Alexis88 · #2 (**permalink**) 09/01/2015, 12:55

Bienvenida a FDW

Como veo que eres nueva en esto, te explicaré una manera simple de sumar/restar valores:

Código HTML:

Ver original<form id = "miForm">
    <label for = "a">Primer valor:</label>
    <input type = "text" id = "a" />
 
    <label for = "b">Segundo valor:</label>
    <input type = "text" id = "b" />
 
    <label>Elija una opción:</label>
    <input type = "radio" name = "opcion" value = "sumar" checked /> Sumar
    <input type = "radio" name = "opcion" value = "restar" /> Restar
        
    <input type = "submit" value = "Ejecutar" />
</form>

Código Javascript:

Ver originalvar inputA = document.querySelector("#a"),
    inputB = document.querySelector("#b"),
    form = document.querySelector("#miForm"), a, b, opcion;
 
form.addEventListener("submit", function(event){
    event.preventDefault();
    
    a = inputA.value;
    b = inputB.value;
    opcion = document.querySelector("[name=opcion]:checked").value;
    
    if ((isNaN(a) || !isFinite(a)) || (isNaN(b) || !isFinite(b))){
        alert("Debe de ingresar valores numéricos");
    }
    else{
        a = parseInt(a);
        b = parseInt(b);
 
        if (opcion == "sumar"){
            alert(a + " más " + b + " es igual a " + (a + b));
        }else{
            alert(a + " menos " + b + " es igual a " + (a - b));
        }
    }
}, false);

Ahora, la explicación. En el documento, tenemos un formulario, el cual contiene dos cajas de texto, cada una acompañada de una etiqueta que indica lo que se debe de ingresar en cada caja. Más abajo, tenemos dos opciones de selección única o radiobuttons, acompañados de una etiqueta que indica lo que se debe de hacer con ellas. Finalmente, tenemos un botón de tipo submit con el cual enviaremos la información ingresada en los campos del formulario para ser procesada.

En el código JavaScript, tomamos a ambas cajas de texto por su id, lo mismo hacemos con el formulario y declaro tres variables que usaré más adelante. Cuando se produzca el evento submit en el formulario, es decir, cuando enviemos la información ingresada en sus campos para procesarla, utilizo el método preventDefault para evitar que se produzca el comportamiento natural de dicho evento, es decir, el envío de la información hacia otro archivo o hacia el mismo, lo cual acarrea la recarga de la ventana.

Una vez controlado esto, tomo los valores ingresados en las cajas de texto, así como el valor de la opción que se encuentre marcada. Enseguida, utilizando las funciones isNaN e isFinite, compruebo que ambos valores sean efectivamente numéricos y de no ser así, muestro un mensaje de alerta en el que le indico al usuario que debe de ingresar valores numéricos, caso contrario, es decir, si los valores son numéricos, como los valores en una caja de texto son cadenas, tomo sus valores numéricos, verifico el valor de la opción seleccionada; si es igual a 'sumar', sumo ambos valores, caso contrario, los resto. En ambos casos, muestro un mensaje de alerta con el resultado de la operación.

DEMO

P.D.: Coloca todo el código JavaScript (con sus respectivas etiquetas <script>) después del formulario y antes de la etiqueta </body>, de otro modo, no funcionará.

Saludos