Question

我正在尝试使用HTML5，CSS和JavaScript编写计算器。我用几个验证器测试了我的HTML和CSS，但是在添加JavaScript函数时，计算器上的按钮不起作用。屏幕上没有显示任何内容，也没有调用任何功能。我在这做错了什么？任何帮助将不胜感激。

谢谢

这是我的HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Adding link to the .css page now -->
    <script type="text/javascript" src = "calculator.js"></script>
    <link rel="stylesheet" href="calculator.css">
    <title>Calculator Front-End</title>

</head>

<body>
        <form>

            <input type = "text" id = "screenid" class = "screen" name = "calcscreen" value = "0">

            <p>
                &nbsp;
            </p>


            <table>
                <tr>
                    <td>&nbsp;</td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">7</button></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">8</button></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">9</button></td>
                    <td><button id = "add" class = "symbolbutton" onclick="addDisp(this)">&plus;</button></td>
                </tr>

                <tr>
                    <td></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">4</button></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">5</button></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">6</button></td>  
                    <td><button id = "sub" class = "symbolbutton" onclick="addDisp(this)">&minus;</button></td>
                </tr>

                <tr>
                    <td></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">1</button></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">2</button></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">3</button></td>
                    <td><button id = "prod" class = "symbolbutton" onclick="addDisp(this)">&times;</button></td>
                </tr>

                <tr>
                    <td></td>
                    <td></td>
                    <td><button class = "digitbutton" id = "digit" onclick="addDisp(this)">0</button></td>
                    <td><button id = "result" class = "symbolbutton" onclick="doCalc(this)">&equals;</button></td>
                    <td><button id = "div" class = "symbolbutton" onclick="addDisp(this)">&divide;</button></td>
                </tr>

            </table>
        </form> 
</body>
</html>

-------------------------------------------------------------------------
-------------------------------------------------------------------------

**** And here's my calculator.js file: ****

//Defining the variables and constants I need for my functions

var previousvalue = 0; //Last button pressed
var newvalue = 0; //Current button being pressed
var previousop = 'plus';
var previnputcn = 'symbolbutton' //Classname of the previous button

//Writing the function to display elements on screen

function addDisp(button) 

    {

    //Assume if the button pressed is a digit:
        if (button.classname == "digitbutton") //Suppose button pressed = 5
            {
                if (previnputcn == "symbolbutton") //Suppose previous button pressed was a symbol
                {
                    newvalue = document.getElementById("digit").value; //New value becomes 5
                }

                else 
                {
                    newvalue = newvalue + document.getElementById("digit").value; 
                    //Previous button pressed was a digit, so current display is appended
                }
            }

        document.getElementById("screenid").value = document.getElementById("screenid").value + newvalue; //Print Everything on Screen

        if (button.classname == "symbolbutton") //Suppose button pressed was a symbol
            {
                var calcResult = doCalc(previousvalue, newvalue, previousop);

                if (calcResult <= 1000000 || calcResult == "ERROR") 
                {
                    newvalue = calcResult;
                }

            document.getElementById("screenid").value = document.getElementById("screenid").value +newvalue;

                if (newvalue == "ERROR")
                    {
                        previousvalue = 0; //Re-initalize last value to 0 in case of an error

                    }

                else 
                    {
                        previousvalue = newvalue; //Re-update current value as last value to continue calculation
                    }

                previousop = button.id; //Last operation gets id of the current operation button

            }
        previnputcn = button.className; //Last button classname stored for reference for future calculations

    }


/*Writing the doCalc() function which handles all the calculations*/

function doCalc(newvalue, previousvalue, previousop)
    {
        var output = newvalue;

        if (previousop == "plus")
            {
                output = parseInt(previousValue) + parseInt(newvalue);
            }
        else if (previousop == "minus") 
            {
                output = parseInt(previousValue) - parseInt(newvalue);
            }
        else if (previousop == "times")
            {
                output = parseInt(previousValue) * parseInt(newvalue);
            }
        else if (previousop == "divide")
            {
                if (newvalue != 0)
                    {
                        output = parseInt(previousValue) / parseInt(newvalue);
                        output = parseInt(output);
                    }   
                else 
                    {
                        output = "ERROR";
                    }
            }
        calcResult = output;
    }

Answer 1

您的代码存在两个问题。

将每个按钮的类型指定为type =“button”。按钮的默认类型是“提交”，这将导致在单击时提交表单。每次点击按钮时，您的页面都会刷新。
您的大多数按钮都具有相同的ID。我应该是唯一的。

您无论如何都会在按钮上将按钮元素作为参数传递给addDisp函数。用它来获取值。

JavaScript不适用于计算器

1 个答案: