Hacer sumas Javascript

[Alexis88]

Bienvenida a FDW

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

Código HTML:

<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:

var 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