Calculadora solución 1

 <h1>Calculadora</h1>
    <input type="number" id="numero1">
    <button id="suma">+</button>
    <button id="resta">-</button>
    <button id="multiplicacion">*</button>
    <button id="division">/</button>
    <input type="number" id="numero2">
    =
    <input type="number" id="resultado">
    <script src="js/script.js"></script>
// Vamos a hacer la suma
// 1.- Establecer el algoritmo (la receta)
// 2.- Comprobar el programa
// 3.- Refactorizar (mejorar)
// Cuando pulsen la suma se suman los dos numeros y se muestran en el resultado
// a) Saber como hacer que cuando pulsen un botón mi programa haga algo
// Añadiendo un evento al botón
// b) Saber coger el valor de una caja de texto
// Obtener el elemento y con 'value'
// c) Saber sumar dos números
// con +
// d) Saber cambiar el valor de una caja de texto
// obtener el elemento y usar el value
// Al pulsar el botón obtener los dos valores, sumarlos y ponerlos en la caja de resultado

let suma=document.getElementById("suma");
suma.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)+Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

let resta=document.getElementById("resta");
resta.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)-Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

let multiplicacion=document.getElementById("multiplicacion");
multiplicacion.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)*Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}


let division=document.getElementById("division");
division.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)/Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos