Question

我是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构建计算器，请帮助我。

Answer 1

您的表单已提交。将其添加到表单元素以阻止提交：

<form name="calc" onSubmit="return false;">

Answer 2

好吧，它不起作用的原因是该元素位于form，看起来它在您单击按钮时提交表单。你可以通过这样做来避免这种情况：

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? - 这应该让你开始。

javascript，计算器错误？

2 个答案: