Calculadora con Javascript

Contactar con el profesor

Como lección adicional al curso de javascript, he decidido replicar el ejercicio de la calculadora con PHP, pero esta vez usando Javascript. Además en este ejercicio, voy a programar la calculadora con Javascript de dos maneras diferentes.

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

Aunque ya tengo una ejemplo de como hacer una calculadora con PHP, probablemente sea más apropiado desarrollarla con Javascript, ya que de esta forma, la página web en la que estamos no se va a recargar ni habrá un redireccionamiento a otra web para ver el resultado.

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. Así que 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

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

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
Efecto parallax →

Aviso Legal | Política de privacidad