Ejemplo de código fuente en JavaScript de un método para realizar operaciones matemáticas para sumar, restar, multiplicar y dividir, dos números dados en dos cajas de texto. También verificaremos que el usuario introduce esos números en esas cajas.

Descripción del ejemplo

Lo que hace este ejemplo es llamar en el evento onClick de cada input, al método “operaciones()”, pasándole como parámetro el tipo de operación matemática que vamos a utilizar en cada caso, y realizando dicha operación mostrándola en un alert.

Para ver este ejemplo algo más avanzado y emular el funcionamiento de una calculadora básica, podemos hacerlo en el siguiente ejemplo:

Código

Éste sería el método de JavaScript con el que se harían las diferentes operaciones:

function operaciones(op)
{

    var ops = {
        sumar: function sumarNumeros(n1, n2) {
            return (parseInt(n1) + parseInt(n2));
        },

        restar: function restarNumeros(n1, n2) {
            return (parseInt(n1) - parseInt(n2));
        },
		
		multiplicar: function multiplicarNumeros(n1, n2) {
            return (parseInt(n1) * parseInt(n2));
        },

        dividir: function dividirNumeros(n1, n2) {
            return (parseInt(n1) / parseInt(n2));
        }


    };



    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;

	
	//Comprobamos si se ha introducido números en las cajas
	if (isNaN(parseFloat(document.getElementById('num1').value))) {
		document.getElementById('resultado').innerHTML="<span style='color: red;'>Por favor, escriba un número 1</span>";
		document.getElementById("num1").innerText = "0";
		document.getElementById("num1").focus();
		} else if (isNaN(parseFloat(document.getElementById('num2').value))) {
		document.getElementById('resultado').innerHTML="<span style='color: red;'>Por favor, escriba un número 2</span>";
		document.getElementById("num2").innerText = "0";
		document.getElementById("num2").focus();
	}
	else {
	//Si se han introducido los números en ámbas cajas, operamos:
		switch(op) {
			case 'sumar':
				var resultado = ops.sumar(num1, num2);
				document.getElementById('resultado').innerHTML="<span style='color: green;'>"+resultado+"</span>";
				break;
			case 'restar':
				var resultado = ops.restar(num1, num2);
				document.getElementById('resultado').innerHTML="<span style='color: green;'>"+resultado+"</span>";
				break;
			case 'multiplicar':
				var resultado = ops.multiplicar(num1, num2);
				document.getElementById('resultado').innerHTML="<span style='color: green;'>"+resultado+"</span>";
				break;
			case 'dividir':
				var resultado = ops.dividir(num1, num2);
				document.getElementById('resultado').innerHTML="<span style='color: green;'>"+resultado+"</span>";
				break;

		}
	}

}

Y éste sería el código HTML del formulario donde realizaremos las operaciones:

<form>
	Número 1: <input id="num1" type="number" />
	Número 2: <input id="num2" type="number" />
	<p id="resultado" style="color: green;"></p>
	<br /><br />
	<input type="button" value="SUMAR" onclick="operaciones('sumar'); return false;" /><br />
	<input type="button" value="RESTAR" onclick="operaciones('restar'); return false;" /><br />
	<input type="button" value="MULTIPLICAR" onclick="operaciones('multiplicar'); return false;" /><br />
	<input type="button" value="DIVIDIR" onclick="operaciones('dividir'); return false;" />
</form>

Demo del ejemplo

Intruduce un número 1 y un número 2 y realiza la operación que desees: