1

我是 javascript 新手，我正在尝试使用 javascript 构建一个计算器。

<form name="calc">
    <div class="screen"><input name="output" class="editscreen"></div>
    <div class="main-keys">
        <button name="del" value="" onClick="rundel()" class="btn2 btn-del">DEL</button>
        <button name="7" value="7" onClick="run7()" class="btn2 num">7</button>
        <button name="8" value="8" onClick="run8()" class="btn2 num">8</button>
        <button name="9" value="9" onClick="run9()" class="btn2 num">9</button>
        <button name="ac" value="ac" onClick="runac()" class="btn2 btn-ac">AC</button>
        <button name="minus" value="-" onClick="runminus()" class="btn2 btn-minus">-</button>
        <button name="4" value="4" onClick="run4()" class="btn2 num">4</button>
        <button name="5" value="5" onClick="run5()" class="btn2 num">5</button>
        <button name="6" value="6" onClick="run6()" class="btn2 num">6</button>
        <button name="multi" value="x" onClick="runmulti()" class="btn2 btn-multi">x</button>
        <button name="plus" value="+" onClick="runplus()" class="btn2 btn-plus">+</button>
        <button name="1" value="1" onClick="run1()" class="btn2 num">1</button>
        <button name="2" value="2" onClick="run2()" class="btn2 num">2</button>
        <button name="3" value="3" onClick="run3()" class="btn2 num">3</button>
        <button name="div" value="÷" onClick="rundiv()" class="btn2 btn-div">÷</button>
        <button name="ans" value="ans" onClick="runans()" class="btn2 btn-ans">ANS</button>
        <button name="0" value="0" onClick="run0()" class="btn2 num">0</button>
        <button name="dec" value="." onClick="rundec()" class="btn2 num">.</button>
        <button name="exp" value="exp" onClick="runexp()" class="btn2 btn-exp">EXP</button>
        <button name="eq" value="=" onClick="runeq()" class="btn2 btn-eq">=</button>
    </div>
</form>
<script>
    function run1()
     {document.calc.output.value += "1";}
    function run2()
     {document.calc.output.value += "2";}
    function run3()
     {document.calc.output.value += "3";}
    function run4()
     {document.calc.output.value += "4";}
    function run5()
     {document.calc.output.value += "5";}
    function run6()
     {document.calc.output.value += "6";}
    function run7()
     {document.calc.output.value += "7";}
    function run8()
     {document.calc.output.value += "8";}
    function run9()
     {document.calc.output.value += "9";}
    function run0()
         {document.calc.output.value += "0";}
    function rundec()
     {document.calc.output.value = ".";}
    function runplus()
     {document.calc.output.value = "+";}
    function runminus()
     {document.calc.output.value = "-";}
    function rundiv()
     {document.calc.output.value = "÷";}
    function runmulti()
     {document.calc.output.value = "x";}
    function rundel()
     {document.calc.output.value = "";}
</script>

当我点击任何键时，它只是闪烁，如何解决它。如果有其他方法可以使用 javascript 构建计算器，请帮助我。

4

2 回答 2

2

您的表单正在提交。将此添加到表单元素以防止提交：

<form name="calc" onSubmit="return false;">
于 2013-10-17T06:59:09.170 回答
1

好的，它不起作用的原因是元素在 aform中，当您单击按钮时，它看起来像是在提交表单。您可以通过以下方式避免这种情况：

onClick="run1(); return false;"

（并在所有按钮上重复它，或者查看dbrin的答案）

话虽如此，最好不要让它成为一个form，只是有一个环境div，所以你的代码开始像：

<div id='calc'>    
    <div class="screen">
        <input id="output" class="editscreen"/>
    </div>
    <div class="main-keys">

（注意我已更改name=为id=）然后您可以使用document.getElementById(...)来获取值：

function run2() {
    document.getElementById('output').value += "2";    
}

最后你有很多重复，没有必要拥有所有的runX功能，当你需要改变所有的东西时，这会让生活变得困难。因此，寻找使其更容易的方法，作为开始，我会看看：

function addDigit(digit) {  
    document.getElementById('output').value += digit;     
}

然后像这样称呼它：

<button name="2" value="2" onClick="addDigit(2)" class="btn2 num">2</button>

等等

现在，您可以更通用，而不是这样做。在将文字数字传递给函数的内部，您可以使用 click 事件本身，然后在处理程序函数 ( addDigit) 中，您可以单击按钮本身（它是事件的目标），然后获取value已经设置好的按钮到要添加的数字。这样做可以大大减少上面的代码。你可以在这里查看一些背景：http ://www.quirksmode.org/js/introevents.html然后这个答案提供了一个例子：Javascript click event handler - how do I get the reference to the clicked item？- 这应该让你开始。

于 2013-10-17T07:01:14.010 回答