2

Tengo el siguiente problema que no consigo resolver.

Al realizar cualquier tipo de operacion sea suma, resta, multiplicacion etc.. si tecleo un numero este se sigue colocando en el input y yo no es lo que quiero.

Por ejemplo: Si hago 1+1 da 2 pero al volver a introducir otro número por ejemplo un 2 me sale 22.

Y yo no quiero este comportamiento, quiero que se limpie ese input. No tengo ningún otro problema que me haya percatado. Lo pongo así ya que no me deja publicarlo porque hay mayoritariamente código.

Gracias

Adjunto el código realizado hasta ahora:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style type="text/css">
            * {
                margin: auto
            }
            div#contenedor {
                display: flex;
                width: 100%;
                margin: auto; 
                height: 100vh;
                align-items: center;
                justify-content: center;
                background-color: cyan
            }
            div#calculadora {
                background-color: red;
                width: 200px;
                height: 175px;
                display: inline-block;
                padding: 10px;
            }

            input {
                width: 45px;
            }
        </style>
    </head>
    <body>
        <div id="contenedor">
            <div id="calculadora">
                <input type='text' id="texto" value="0" disabled style="width: 98%" ><br><br>

                <input type="button" value="sqrt" onclick="raizCuadrada()">
                <input type="button" value="C" onclick="limpiarUltimo()">
                <input type="button" value="CA" onclick='limpiarTodo()'>
                <input type="button" value="X" onclick="hacerOperacion(this.value)">

                <input type="button" value="7" onclick="ponerDigito(this.value)">
                <input type="button" value="8" onclick="ponerDigito(this.value)">
                <input type="button" value='9' onclick="ponerDigito(this.value)">
                <input type="button" value='/'  onclick="hacerOperacion(this.value)">

                <input type="button" value="4" onclick="ponerDigito(this.value)">
                <input type="button" value="5" onclick="ponerDigito(this.value)">
                <input type="button" value='6' onclick="ponerDigito(this.value)">
                <input type="button" value='-'  onclick="hacerOperacion(this.value)">

                <input type="button" value="1" onclick="ponerDigito(this.value)">
                <input type="button" value="2" onclick="ponerDigito(this.value)">
                <input type="button" value='3' onclick="ponerDigito(this.value)">
                <input type="button" value='+'  onclick="hacerOperacion(this.value)">

                <input type="button" value="0" onclick="ponerDigito(this.value)">
                <input type="button" value="." onclick="ponerPunto(this.value)">
                <input type="button" value='%'  onclick="porcentaje()">
                <input type="button" value='='  onclick="resultado()">
            </div>
        </div>
        <script>

            var num1 = 0;
            var operacionPendiente = false;

            function ponerDigito(valor) {
                digitobase=document.getElementById('texto').value;
                if(digitobase == '0' || operacionPendiente ) {
                    document.getElementById('texto').value = valor;
                } else {
                    document.getElementById('texto').value = digitobase + valor;
                }
            }


            function ponerPunto(valor) {
                numeroCaracters = document.getElementById('texto').value.length;  
                texto = document.getElementById('texto').value;                                 
                i = 1;
                while (texto.charAt(i) != "." && i<=numeroCaracters) { 
                    i++; 
                }
                if (texto.charAt(i) != ".") {
                    document.getElementById('texto').value = document.getElementById('texto').value + valor;
                }
            }

            function limpiarTodo() {
                document.getElementById('texto').value = '0';
            }

            function limpiarUltimo() {
                numeroCaracters = document.getElementById('texto').value.length;         
                if (numeroCaracters == 1) { 
                    document.getElementById('texto').value = '0';
                } else {
                    document.getElementById('texto').value = document.getElementById('texto').value.substring(0,numeroCaracters-1); 
                }
            }

            function hacerOperacion(operador) { 
                num1 = parseFloat(document.getElementById('texto').value);
                operacionPendiente = true;
                operacion = operador;
            }

            function porcentaje(){
                document.getElementById('texto').value = parseFloat(document.getElementById('texto').value) / 100;
            }

            function raizCuadrada() {
                document.getElementById('texto').value = Math.sqrt(parseFloat(document.getElementById('texto').value));
            }

            function resultado() {
                operacionPendiente = false;
                switch(operacion) {
                    case 'X':
                        document.getElementById('texto').value = num1 * parseFloat(document.getElementById('texto').value);
                        break;
                    case '/':
                        if (document.getElementById('texto').value != '0') { 
                            document.getElementById('texto').value = num1 / parseFloat(document.getElementById('texto').value);
                        } else {  //Si se divide entre 0 da un Error
                            document.getElementById('texto').value = "Error"
                        }
                        break;
                    case '-':
                        document.getElementById('texto').value = num1 - parseFloat(document.getElementById('texto').value);
                        break;
                    case '+':
                        document.getElementById('texto').value = num1 + parseFloat(document.getElementById('texto').value);
                        break;
                    default:
                }
            }
        </script>
    </body>
</html>

1
  • Una solución sería dividir la pantalla entre lo que quieres escribir (input) y lo que quieres que dispare (output)
    – user128841
    Commented el 16 jun. 2019 a las 18:41

2 respuestas 2

1

Modifique este método agregando la validación del estado.

function ponerDigito(valor) {
          if (!operacionPendiente) {
              document.getElementById('texto').value ='0';
          }
            digitobase=document.getElementById('texto').value;
            if(digitobase == '0' || operacionPendiente ) {
                document.getElementById('texto').value = valor;
            } else {
                document.getElementById('texto').value = digitobase + valor;
            }
        }

0
0

Ya he encontrado la solución a mi problema.

Adjunto el código.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style type="text/css">
            * {
                margin: auto
            }
            div#contenedor {
                display: flex;
                width: 100%;
                margin: auto; 
                height: 100vh;
                align-items: center;
                justify-content: center;
                background-color: cyan
            }
            div#calculadora {
                background-color: red;
                width: 200px;
                height: 175px;
                display: inline-block;
                padding: 10px;
            }

            input {
                width: 45px;
            }
        </style>
    </head>
    <body>
        <div id="contenedor">
            <div id="calculadora">
                <input type='text' id="texto" value="0" disabled style="width: 98%" ><br><br>


                <input type="button" value="sqrt" onclick="raizCuadrada()">
                <input type="button" value="C" onclick="limpiarUltimo()">
                <input type="button" value="CA" onclick='limpiarTodo()'>
                <input type="button" value="X" onclick="hacerOperacion(this.value)">

                <input type="button" value="7" onclick="ponerDigito(this.value)">
                <input type="button" value="8" onclick="ponerDigito(this.value)">
                <input type="button" value='9' onclick="ponerDigito(this.value)">
                <input type="button" value='/'  onclick="hacerOperacion(this.value)">

                <input type="button" value="4" onclick="ponerDigito(this.value)">
                <input type="button" value="5" onclick="ponerDigito(this.value)">
                <input type="button" value='6' onclick="ponerDigito(this.value)">
                <input type="button" value='-'  onclick="hacerOperacion(this.value)">

                <input type="button" value="1" onclick="ponerDigito(this.value)">
                <input type="button" value="2" onclick="ponerDigito(this.value)">
                <input type="button" value='3' onclick="ponerDigito(this.value)">
                <input type="button" value='+'  onclick="hacerOperacion(this.value)">

                <input type="button" value="0" onclick="ponerDigito(this.value)">
                <input type="button" value="." onclick="ponerPunto(this.value)">
                <input type="button" value='%'  onclick="porcentaje()">
                <input type="button" value='='  onclick="resultado()">
            </div>
        </div>
        <script>
            var operacion = "+";
            var operador = "+";
            var num1 = 0;
            var ultimaTeclaOperacion = false;


            function ponerDigito(valor) {
                //Si hay un 0 ó provengo de haber tecleado una tecla operación
                if(document.getElementById('texto').value == '0' || ultimaTeclaOperacion ) {                             
                    document.getElementById('texto').value = valor;
                    ultimaTeclaOperacion = false;
                } else {
                    //En caso contrario concateno digito con lo que aparezca en el display
                    document.getElementById('texto').value = document.getElementById('texto').value + valor;   
                }
            }

            function ponerPunto(valor) {
                numeroCaracters = document.getElementById('texto').value.length;  
                texto = document.getElementById('texto').value;
                if (!ultimaTeclaOperacion) {
                    i = 1;
                    while (texto.charAt(i) != "." && i<=numeroCaracters) { 
                        i++; 
                    }
                    if (texto.charAt(i) != ".") {
                        document.getElementById('texto').value = document.getElementById('texto').value + valor;
                    }
                } else {
                    //Se ha pulsado la tecla ('.') y la inmediata anterior era una tecla de operación por lo cual pongo en el display ('0.').
                    document.getElementById('texto').value = "0.";
                    ultimaTeclaOperacion = false;
                }
            }

            function limpiarTodo() {
                document.getElementById('texto').value = '0';
            }

            function limpiarUltimo() {
                numeroCaracters = document.getElementById('texto').value.length;         
                if (numeroCaracters == 1) { 
                    document.getElementById('texto').value = '0';
                } else {
                    document.getElementById('texto').value = document.getElementById('texto').value.substring(0,numeroCaracters-1); 
                }
            }

            function hacerOperacion(operador) { 
                //Guardo sobre num1 el valor que existía en el display previo a apretar una tecla de operación.
                num1 = parseFloat(document.getElementById('texto').value);
                ultimaTeclaOperacion = true;
                //Pongo sobre una variable global el símbolo de la ultima tecla de operacion apretada.
                operacion = operador;
            }

            function porcentaje(){
                document.getElementById('texto').value = parseFloat(document.getElementById('texto').value) / 100;
                ultimaTeclaOperacion = true;
            }

            function raizCuadrada() {
                document.getElementById('texto').value = Math.sqrt(parseFloat(document.getElementById('texto').value));
                ultimaTeclaOperacion = true;
            }

            function resultado() {
                ultimaTeclaOperacion = true;
                switch(operacion) {
                    case 'X':
                        document.getElementById('texto').value = num1 * parseFloat(document.getElementById('texto').value);
                        break;
                    case '/':
                        if (document.getElementById('texto').value != '0') { 
                            document.getElementById('texto').value = num1 / parseFloat(document.getElementById('texto').value);
                        } else {  
                            document.getElementById('texto').value = "Error"
                        }
                        break;
                    case '-':
                        document.getElementById('texto').value = num1 - parseFloat(document.getElementById('texto').value);
                        break;
                    case '+':
                        document.getElementById('texto').value = num1 + parseFloat(document.getElementById('texto').value);
                        break;
                    default:
                }
            }
        </script>
    </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.