Necesita javascript que agregue valores juntos (resultado en vivo), sin hacer clic en un botón =

Necesito hacer una especie de "calculadora" con botones, con los valores del 1 al 10. Luego, cuando, por ejemplo, presiono "1", un cuadro de resultados mostrará "1", y luego, cuando presiono "4", el resultado imprimirá automáticamente "5", sin tener que presionar un botón "=".

Solo lo necesito para agregar valores juntos y tener una función de reinicio.

Javascript es bastante nuevo para mí. Todavía no soy muy bueno escribiendo, pero entiendo casi todo.

Realmente espero que alguien pueda ayudarme!

Este es mi código actual:

    <html>
<head>
<style type="text/css">
table.calc {
     border: 2px solid #0034D1;
     background-color: #809FFF;
}
input.calc {
     width: 100%;
     margin: 5px;
}
</style>

<script>
function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '';
     }
     else {
          document.getElementById('screen').value += buttonValue;
     }
}
function calculate(equation) {
     var answer = eval(equation);
     document.getElementById('screen').value = answer;
}

</script>
</head>

<body>
<table class="calc" cellpadding=4>
<tr><td colspan=3><input class="calc" id="screen" type="text"></td></tr>
<tr>
<td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
</tr>
<tr><td colspan=3><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td></tr>
</table>

</body>
</html>

preguntado el 22 de mayo de 12 a las 19:05

No, estoy a punto de hacer una herramienta web. -

¿Qué debería pasar si presionas 2 dos veces, si eso luego agrega 22 al número anterior, o simplemente añadir 2 ¿dos veces? -

2 Respuestas

Está utilizando la "característica" de JavaScript de concatenar cadenas juntas (cadena + número también es igual a cadena), por lo que necesita parseInt alrededor de cada número. Además, dado que estoy usando parseInt, necesito establecer el valor de la pantalla en 0 (cero) en lugar de ''

<input class="calc" id="screen" value="0" type="text">

luego cambia esto:

function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '0';
     }
     else {
          document.getElementById('screen').value = 
            parseInt(document.getElementById('screen').value) + 
            parseInt(buttonValue);
     }
}

Nota: Presionando . (punto) o + (más) provoca un error. Creo que necesita llamar a una función separada cuando se presiona.

contestado el 22 de mayo de 12 a las 20:05

Muy útil gracias Me pregunto si hay una manera de hacer que funcione con valores como 1,0023. - Mathias Jakobsen

Pensé en eso. Sería confuso para el usuario, pero podría activar la adición después de que transcurriera una cantidad de tiempo preestablecida después de la última pulsación de tecla (por ejemplo, 0.5 segundos). Me apegaría al comportamiento "estándar" de las calculadoras regulares, haciendo el cálculo cuando se presiona =. - heitor chang

No te sigo del todo, lo siento. ¿Podría hacer una copia del script de GreenGiant y agregar la función para que pueda entenderlo? - Me salvaría el día :) - Mathias Jakobsen

Intente escribirse usted mismo primero y publique una nueva pregunta cuando se quede atascado. Lo que describí usaría setTimeout y clearTimeout, o necesitaría mantener variables como runningTotal, currentNumber si usa el botón = - heitor chang

            <html>
        <head>
        <style type="text/css">
        table.calc {
             border: 2px solid #0034D1;
             background-color: #809FFF;
        }
        input.calc {
             width: 100%;
             margin: 5px;
        }
        </style>

        <script>
        function pushButton(buttonValue) {
             if (buttonValue == 'C') {
                  document.getElementById('screen').value = '0';
             }
             else {//this is where most changes occured
                    var x= document.getElementById('screen').value 
                    x =parseInt(x)+ parseInt(buttonValue);
                    document.getElementById('screen').value=x;
             }
        }
        function calculate(equation) {
             var answer = eval(equation);
             document.getElementById('screen').value = answer;
        }

        </script>
        </head>

        <body>
        <table class="calc" cellpadding=4>
        <tr><td colspan=3><input class="calc" id="screen" value='0'type="text"></td></tr>
        <tr>
        <td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='/' onclick="pushButton(this.value);"></td>
        </tr>
        <tr>
        <td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='*' onclick="pushButton(this.value);"></td>
        </tr>
        <tr>
        <td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='-' onclick="pushButton(this.value);"></td>
        </tr>
        <tr>
        <td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
        </tr>
        <tr><td colspan=3><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td></tr>
        </table>

        </body>
        </html

esto hace lo que quieres, excepto que muestra un 0 cuando borras la página. Me aseguré de hacer los valores int antes de agregarlos.

contestado el 22 de mayo de 12 a las 20:05

Eso era EXACTAMENTE lo que necesitaba. ¡Muchas gracias! - Mathias Jakobsen

GGG: No. Soy de Dinamarca y mi gramo ciertamente no es bueno. Lo siento por las palabras o frases mal escritas. - Mathias Jakobsen

@user1410965 estaba dirigido a GreenGiant, no a "tú". - Nabbit Dagg

@GreenGiant: ¿es posible hacer que funcione con valores como 1,0456? - Mathias Jakobsen

@user 1410965 ¿se supone que es un decimal o una coma? y no, no funcionará con esos valores ya que cuando hace clic en el botón, automáticamente lo agrega al valor en la pantalla. esta es la forma en que lo configuras. SI quisiera usar 1,0456, necesitaría tener un botón igual; de lo contrario, el programa no sabrá cuando haya terminado con el número. Además, si esto es exactamente lo que está buscando, ¿podría aceptar la respuesta? - Gigante verde

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.