我想修改这个程序，以便在执行操作而不是按下等于按钮时计算值 [英] I want to modify this program so the values would calculate when I perform an operation instead of pressin equals button

问题描述

This is is a basic javascript calculator and it works fine but i want to modify it so operations would always perform and update instead of me clicking the equals button. what i mean is when i do something like 2+2+2+2 it does not calculate until i press the equal button.






<pre> <div class="container"	>
<br>
<h1><font color="red" style= "font-size:70"> Ayoola's Calculator </font></h1>
<form name="calculator" >
  <input name = "display" placeholder="0" style= "width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px"/>
<br>
<input name = "answer" placeholder="0" style= "width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px"/>
  <br>
<input type="button" value= "7" name="seven"  onClick="document.calculator.display.value+='7'" style="width:60px; font-size:30; margin:3px"/>
<input type="button" value= "8" name="eight"  onClick="document.calculator.display.value+='8'" style="width:60px; font-size:30; "/>
<input type="button" value= "9" name="nine"   onClick="document.calculator.display.value+='9'" style="width:60px; font-size:30; "/>
<input type="button" value= "*" name="multiply" onClick="document.calculator.display.value+='*'" style="width:60px;  font-size:30; "/>
<br>
<input type="button" value= "4" name="four"  onClick="document.calculator.display.value+='4'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "5" name="five"  onClick="document.calculator.display.value+='5'" style="width:60px; font-size:30; "/>
<input type="button" value= "6" name="six"   onClick="document.calculator.display.value+='6'" style="width:60px; font-size:30; "/>
<input type="button" value= "-" name="minus"  onClick="document.calculator.display.value+='-'" style="width:60px; font-size:30; "/>
<br>
<input type="button" value= "1" name="one"   onClick="document.calculator.display.value+='1'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "2" name="two"   onClick="document.calculator.display.value+='2'" style="width:60px; font-size:30; "/>
<input type="button" value= "3" name="three" onClick="document.calculator.display.value+='3'" style="width:60px; font-size:30; "/>
<input type="button" value= "+" name="plus"  onClick="document.calculator.display.value+='+'" style="width:60px; font-size:30; "/>
<br>
<input type="button" value= "." name="point"  onClick="document.calculator.display.value+='.'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "0" name="zero"   onClick="document.calculator.display.value+='0'" style="width:60px; font-size:30; "/>
<input type="button" value= "/" name="divide"  onClick="document.calculator.display.value +='/'" style="width:60px; font-size:30; "/>
<input type="button" value= "=" name="equal"  onClick="document.calculator.answer.value=eval(document.calculator.display.value)" style="width:60px;  font-size:30; "/>
<br>
<input type="reset" value= "C"   onClick= "clear" style="width:256px;  font-size:30; margin:3px "/>


</form>   
</div>

我尝试过：



i尝试使用funcyion但没有工作

What I have tried:

i have tried using funcyion but didnt work

推荐答案

试试这个

try this

<form name="calculator">
            <input name="display" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input name="answer" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input type="button" value="7" name="seven"  style="width:60px; font-size:30; margin:3px" />
            <input type="button" value="8" name="eight"  style="width:60px; font-size:30; " />
            <input type="button" value="9" name="nine"  style="width:60px; font-size:30; " />
            <input type="button" value="*" name="multiply"  style="width:60px;  font-size:30; " />
            <br>
            <input type="button" value="4" name="four" style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="5" name="five"  style="width:60px; font-size:30; " />
            <input type="button" value="6" name="six"  style="width:60px; font-size:30; " />
            <input type="button" value="-" name="minus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="1" name="one"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="2" name="two"  style="width:60px; font-size:30; " />
            <input type="button" value="3" name="three"  style="width:60px; font-size:30; " />
            <input type="button" value="+" name="plus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="." name="point"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="0" name="zero"  style="width:60px; font-size:30; " />
            <input type="button" value="/" name="divide"  style="width:60px; font-size:30; " />
            <input type="button" value="=" name="equal" onclick="document.calculator.answer.value=eval(document.calculator.display.value)" style="width:60px;  font-size:30; " />
            <br>
            <input type="reset" value="C" onclick="clear" style="width:256px;  font-size:30; margin:3px " />
            <script>
                var buttons = document.querySelectorAll(".container input[type=button]");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = function () {
                        if (this.value != '=') {
                            document.calculator.display.value += '' + this.value;
                            document.calculator.answer.value = eval(document.calculator.display.value)
                        }
                     };
                }


                

            </script>
            </form>

创建一个类似
的函数

Create a function like

function show(c) {
    document.calculator.display.value += c;
    document.calculator.answer.value=eval(document.calculator.display.value);
}

然后更改您的onclick活动

then change your onclick events from

onClick="document.calculator.display.value+='7'"

to

to

onClick="show('7')"

这篇关于我想修改这个程序，以便在执行操作而不是按下等于按钮时计算值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！