Question

我需要用按钮制作一个“计算器”，值为1到10。然后，当我例如按“1”时，结果框将显示“1”，然后当我按“4”时，结果将自动打印“5”，而不必按“=”按钮。

我只需要它一起添加值，并具有重置功能。</ p>

Javascript对我来说很新鲜。我还不太擅长写作，但我几乎理解了一切。

真的希望有人能帮帮我！

这是我目前的代码：

    <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>

Answer 1

您正在使用将字符串连接在一起的JavaScript“功能”（字符串+数字也等于字符串），因此每个数字周围需要parseInt。另外，由于我使用的是parseInt，需要将屏幕值设置为0（零）而不是''

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

然后改变这个：

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

注意：按。（点）或+（加号）会导致错误。我认为你需要在按下时调用一个单独的函数。

Answer 2

            <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

这就是你想要的东西，当你浏览页面时，excepts会显示0。我确保在将值加在一起之前将值设为int。

需要javascript一起添加值（实时结果），而无需单击=按钮

2 个答案: