Calculadora con Javascript

Contactar con el profesor

La calculadora con Javascript es un ejercicio muy habitual cuando estamos dando los primeros pasos en cualquier lenguaje de programación.

En este ejercicio, voy a programar la calculadora con Javascript de dos maneras diferentes. La primera versión es poco más sencilla, y la segunda se apoya en la primera. En el video tienes el proceso utilizando las dos metodologías.

Utilizando un select desplegable para las operaciones

Podremos seleccionar la operación a realizar (suma, resta, multiplicación y división) utilizando la etiqueta select de HTML.

El ejercicio resuelto

Como puedes ver tanto en el código fuente como en el resultado final, tenemos dos inputs, uno para cada uno de los dos números que vamos a operar con la calculadora, y un select (un desplegable) que nos permitirá escoger la operación que queremos realizar.

Al pulsar el botón de calcular, lo primero que haremos será recoger estos tres valores del formulario y almacenarlos en n1, n2 y op2.

Luego, evaluamos op2 para decidir cual será la la operación que vamos a realizar (suma, resta, multiplicación y división). En función de dicha evaluación la variable r (resultado) tendrá un valor u otro.

Finalmente, la última línea modifica la propiedad innerHTML del elemento cuya id es r2, lo cual nos permitirá pintar el resultado en pantalla.

Código fuente

<input type="text" id="n11" placeholder="n1">
<input type="text" id="n22" placeholder="n2">

<select id="op">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
    
<button id="calcular2">Calcular</button>

<output id="r2"></output> 
<script>
    
    document.querySelector('#calcular2').addEventListener('click', () =>{
        const n1 = parseInt(document.querySelector('#n11').value);
        const n2 = parseInt(document.querySelector('#n22').value);
        const op2 = document.querySelector('#op').value;
        let r;
        if(op2 == '+'){
            r = n1 + n2;
        }else if( op2 == '-'){
            r = n1 - n2;
        }else if(op2 == '*'){
            r = n1 * n2;
        }else if(op2 == '/'){
            r = n1 / n2;
        }
        document.querySelector('#r2').innerHTML = r;
    });

</script>

Utilizando botones para seleccionar las operaciones que deseamos hacer

El ejercicio resuelto

En este otro ejemplo, la operación a realizar no será escogida mediante un desplegable, sino seleccionada directamente al pulsar su correspondiente botón.

Con esto, modificaremos el valor de la variable global op, que evaluaremos al pulsar el botón de calcular para calcular el resultado.

Código fuente

<input type="text" id="n1" placeholder="n1">
<input type="text" id="n2" placeholder="n2">


<button id="suma">+</button>
<button id="resta">-</button>
<button id="multiplicacion">*</button>
<button id="division">/</button>
<button id="calcular">Calcular</button>

<output id="r"></output> 
<script>
    let op;
    document.querySelector('#suma').addEventListener('click', () =>{
        op = '+';
    });
    document.querySelector('#resta').addEventListener('click', () =>{
        op = '-';
    });
    document.querySelector('#multiplicacion').addEventListener('click', () =>{
        op = '*';
    });
    document.querySelector('#division').addEventListener('click', () =>{
        op = '/';
    });

    document.querySelector('#calcular').addEventListener('click', () =>{
        const n1 = parseInt(document.querySelector('#n1').value);
        const n2 = parseInt(document.querySelector('#n2').value);
        //const op = document.querySelector('#op').value;
        let r;
        if(op == '+'){
            r = n1 + n2;
        }else if( op == '-'){
            r = n1 - n2;
        }else if(op == '*'){
            r = n1 * n2;
        }else if(op == '/'){
            r = n1 / n2;
        }
        document.querySelector('#r').innerHTML = r;
    });

</script>
← DOM con Javascript
Obtener la letra del DNI →

Aviso Legal | Política de privacidad