Question

注意：问题似乎主要是因为程序无法正确调用函数，因为将它们更改为只是警告（）＆＃39;让他们都工作得很好。

我最近想使用javascript在html页面上制作一个计算器，直到我注意到我完成之后，这些按钮实际上并没有做任何事情。经过一些故障排除（这就是警报（）在函数中的原因，我发现我的函数没有被正确调用。我不太确定我在做什么错了，所以我需要一些帮助。以下是代码：

<html>
<head>
<title>
Web calculator
</title>
<script language="JavaScript">
<!--
var num1="", num2="", operation="", solution=0;

function clear(){
    alert()
    window.document.calculator.display.value="CLEAR";
    window.document.calculator.display.size=5;
    operation="";
    solution=0;
    num1="";
    num2="";
}
function addNumber(number){
    alert();
    window.document.calculator.display.value+=number;
    window.document.calculator.display.size+=1;
    if(operation.length>0){
        num2+=number;
    }
    else if(operation.length==0){
        num1+=number;
    };
}
function addOperation(op){
    alert()
    operation=op;
    var value = window.document.calculator.display.value;
    if((parseInt(value.indexOf('+')) + parseInt(value.indexOf('-')) + parseInt(value.indexOf('/')) + parseInt(value.indexOf('*')))!=-4){
        window.document.calculator.display.size+=1;
        window.document.calculator.display.value+=operation;
    else{
        window.document.calculator.display.value-="-";
        window.document.calculator.display.value-="+";
        window.document.calculator.display.value-="/";
        window.document.calculator.display.value-="*";
        window.document.calculator.display.value=num1+operation+num2;
    };
}
function solve(){
    alert()
    num1=num1.parseFloat(num1);
    num2=num2.parseFloat(num2);
    switch(operation){
        ('+'){
            solution=num1+num2;
        }
        ('-'){
            solution=num1-num2;
        }
        ('*'){
            solution=num1*num2;
        }
        ('/'){
            solution=num1/num2;
        }
    };
    window.document.calculator.display.value=solution;
}
-->
</script>
</head>
<body onLoad="clear();">
<br><br><br><br><br><br><br><br>
<center>
<form name="calculator">
    <table border=5>
        <tr>
            <center>
            <td colspan=3>
                <input type="text" name="display" readonly value="" size="5">
            </td>
            <td>
                <input type="button" name="buttonclear" readonly value="C" onClick="clear();">
            </td>
            </center>
        </tr>
        <tr>
            <center>
            <td>
            <input type="button" name="buttonseven" readonly value="7" onClick="addNumber('7');">
            </td>
            <td>
            <input type="button" name="buttoneight" readonly value="8" onClick="addNumber('8');">
            </td>
            <td>
            <input type="button" name="buttonnine" readonly value="9" onClick="addNumber('9' /*this part is fixed due to a below comment, however it was not the culprit of the problem*/);">
            </td>
            <td>
            <input type="button" name="buttonminus" readonly value="-" onClick="addOperation('-');">
            </td>
            </center>
        </tr>
        <tr>
            <center>
            <td>
            <input type="button" name="buttonfour" readonly value="4" onClick="addNumber('4');">
            </td>
            <td>
            <input type="button" name="buttonfive" readonly value="5" onClick="addNumber('5');">
            </td>
            <td>
            <input type="button" name="buttonsix" readonly value="6" onClick="addNumber('6');">
            </td>
            <td>
            <input type="button" name="buttonplus" readonly value="+" onClick="addOperation('+');">
            </td>
            </center>
        </tr>
        <tr>
            <center>
            <td>
            <input type="button" name="buttonone" readonly value="1" onClick="addNumber('1');">
            </td>
            <td>
            <input type="button" name="buttontwo" readonly value="2" onClick="addNumber('2');">
            </td>
            <td>
            <input type="button" name="buttonthree" readonly value="3" onClick="addNumber('3');">
            </td>
            <td>
            <input type="button" name="buttontimes" readonly value="*" onClick="addOperation('*');">
            </td>
            </center>
        </tr>
        <tr>
            <center>
            <td>
            <input type="button" name="buttondot" readonly value="." onClick="addNumber('.');">
            </td>
            <td>
            <input type="button" name="buttonzero" readonly value="0" onClick="addNumber('0');">
            </td>
            <td>
            <input type="button" name="buttonequals" readonly value="=" onClick="solve();">
            </td>
            <td>
            <input type="button" name="buttondivide" readonly value="/" onClick="addOperation('/');">
            </td>
            </center>
        </tr>
    </table>
</form>
</center>
</body>
</html>

Answer 1

你有几个问题。在代码运行时按f12，从现代浏览器打开开发工具。

您在addOperation函数中的}之前错过了else。

这是在js中使用开关的合适方式：

switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        code block
}

Answer 2

其中一个onClick函数中有一个未闭合的'：

<input type="button" name="buttonnine" readonly value="9" onClick="addNumber('9);">

将其更改为 onClick="addNumber('9');"

可能会解决它。

Answer 3

我已将您的代码输入到JSFiddle中，除了其他人提到的语法问题之外，还没有定义clear和addNumber。在运行函数之前需要check if the document is ready：如果在函数试图访问它时尚未加载元素，则会抛出错误。

另一方面，window对象不需要访问属于原始DOM的元素。

此外，正如其他人所说，使用浏览器的控制台（通常是F12 / Ctrl + Shift + J）调试JavaScript非常重要。依赖警报的日子早已不复存在。

没有调用javascript计算器函数的麻烦

3 个答案: