2

Estoy haciendo una simple calculadora en JS y lo que quiero es que cuando se presiona el botón igual (=) y no se haya presionado ninguna operación la calculadora solo muestre los números que se han escrito hasta ahora. Y que cuando se presione un punto (.) solo deje escribir números después de ese punto. He hecho este código entre otras pruebas pero no lo consigo, no se escribe nada en la pantalla:

for (let i = 0; i < numeros.length; i++) {
numeros[i].addEventListener("click", () => {
    if (operacion === ""){
        
        //Si el numero ingresado es un signo igual:
       if (numeros[i].innerText == "="){
           pantalla.innerText = operando_a;
           operando_a = "";
           operando_b = "";
           operacion = "";
       }
       

       //Si ya hay un punto en el operador, solo se podrán escribir numeros:
        if (operando_a.includes(".")){
           if (numeros[i].innerText != "."){
               operando_a += numeros[i].innerText;
               pantalla.innerText += numeros[i].innerText;
           }
       }
        

numeros es el array de los botones con la clase "tecla" en HTML y tiene una función que maneja el evento cuando se hace click en el.

operando_a es el primer operador, después sigue el operando_b en la condición else

operacion es la variable que marcará la operación matemática

1
  • si alguna de las respuesta te ha servido podes marcarla como resuelta, eso te dara al menos 2 puntos de reputacion que te seran utiles en un futuro. saludos. Commented el 29 jun. a las 17:05

2 respuestas 2

3

Prueba con esto:

const pantalla = document.getElementById("pantalla"); //Obtiene el elemento con id #pantalla
const numeros = document.querySelectorAll(".tecla"); // Selecciona todos los botones con la clase "tecla"

for (let i = 0; i < numeros.length; i++) {
    numeros[i].addEventListener("click", function() {
        const valorBoton = numeros[i].innerText;

        // Si el botón presionado es igual a "="
        if (valorBoton === "=") {
            if (operacion === "") {
                pantalla.innerText = operando_a;
                // Resetear valores
                operando_a = "";
                operando_b = "";
                operacion = "";
            }
            
        } else if (valorBoton === ".") {
            //Evitar '.' infinito, si ya existe un punto no deja poner otro
            if (!operando_a.includes(".")) {
                operando_a += valorBoton;
                pantalla.innerText = operando_a;
            }
        } else {
            //Entrada de números cuando sea diferente a '='
            operando_a += valorBoton;
            pantalla.innerText = operando_a;
        }
    });
}

Explicación: En tu código proporcionado no tienes una correcta implementación para manejar el botón '=', por lo que se añade la variable de valorBoton para almacenar el innetText el elemento seleccionado.

const valorBoton = numeros[i].innerText;

No tienes la lógica para manejar la inserción de '.' ni la validación para evitar '.' infinito, por lo que se añade es la validación de que si ya hay un punto no añada más.

} else if (valorBoton === ".") { if (!operando_a.includes(".")) {

En el código que te proporcioné se añaden las validaciones de que se añadan puntos y números a operando_a, validación de que sea solo 1 punto max. y resetea los operandos cuando se presiona '=' y no hay una operación previa.

Finalmente, si quieres implementar para el operando_b las mismas validaciones solo toca seguir la misma lógica que se lleva para el operando_a.

2

Bueno yo tengo este snipet de una calculadora desde hace buen rato a lo mejor se sirva (voy a estar mejorandolo para actualizarlo)...

  • Control de Nuevo Operando: Se agregó una bandera nuevoOperando para manejar la transición entre el ingreso del primer operando y el segundo operando después de seleccionar una operación.

es la manera como evitaria los problemas que presentas:

const pantalla = document.getElementById('pantalla');
        const numeros = document.querySelectorAll('.tecla');
        let operando_a = '';
        let operando_b = '';
        let operacion = '';
        let nuevoOperando = false;

        numeros.forEach(numero => {
            numero.addEventListener('click', () => {
                const valor = numero.getAttribute('data-value');
                
                if (valor === '=') {
                    if (operacion && operando_a) {
                        operando_b = pantalla.innerText;
                        pantalla.innerText = eval(`${operando_a} ${operacion} ${operando_b}`);
                        operando_a = pantalla.innerText;
                        operacion = '';
                    }
                } else if (['+', '-', '*', '/'].includes(valor)) {
                    if (operando_a) {
                        operacion = valor;
                        nuevoOperando = true;
                    }
                } else if (valor === '.') {
                    if (!pantalla.innerText.includes('.')) {
                        pantalla.innerText += valor;
                    }
                } else if (valor === 'C') {
                    pantalla.innerText = '0';
                    operando_a = '';
                    operando_b = '';
                    operacion = '';
                } else {
                    if (pantalla.innerText === '0' || nuevoOperando) {
                        pantalla.innerText = valor;
                        nuevoOperando = false;
                    } else {
                        pantalla.innerText += valor;
                    }
                    if (!operacion) {
                        operando_a = pantalla.innerText;
                    }
                }
            });
        });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora</title>
    <style>
        .calculator {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            max-width: 200px;
            margin: 0 auto;
        }
        .screen {
            grid-column: span 4;
            height: 50px;
            text-align: right;
            padding: 10px;
            background: #ddd;
        }
        .button {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #eee;
            cursor: pointer;
        }
        .button:active {
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="screen" id="pantalla">0</div>
        <div class="button tecla" data-value="7">7</div>
        <div class="button tecla" data-value="8">8</div>
        <div class="button tecla" data-value="9">9</div>
        <div class="button tecla" data-value="/">/</div>
        <div class="button tecla" data-value="4">4</div>
        <div class="button tecla" data-value="5">5</div>
        <div class="button tecla" data-value="6">6</div>
        <div class="button tecla" data-value="*">*</div>
        <div class="button tecla" data-value="1">1</div>
        <div class="button tecla" data-value="2">2</div>
        <div class="button tecla" data-value="3">3</div>
        <div class="button tecla" data-value="-">-</div>
        <div class="button tecla" data-value="0">0</div>
        <div class="button tecla" data-value=".">.</div>
        <div class="button tecla" data-value="=">=</div>
        <div class="button tecla" data-value="+">+</div>
        <div class="button tecla" data-value="C">C</div>
    </div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.