JavaScript不适用于计算器

Question

I'm trying to write a calculator using HTML5, CSS and JavaScript. 我正在尝试使用HTML5，CSS和JavaScript编写计算器。 I've tested my HTML and CSS with several validators, but on adding the JavaScript functions, my buttons on the calculator aren't working. 我已经使用多个验证器测试了HTML和CSS，但是在添加JavaScript函数时，计算器上的按钮不起作用。 Nothing is displayed on the screen and none of the functions are being called. 屏幕上不显示任何内容，并且未调用任何功能。 What am I doing wrong here? 我在这里做错了什么？ Any help would be appreciated. 任何帮助，将不胜感激。

Thank you 谢谢

Here is my HTML code 这是我的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: **** **** 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

There are two issues with your code. 您的代码有两个问题。

Specify the type of each button as type="button". 将每个按钮的类型指定为type =“ button”。 The default type for button is "submit" which will cause the form to be submitted on clicking. 按钮的默认类型是“提交”，这将导致单击时提交表单。 Your page is getting refreshed everytime the buttons are clicked. 每次单击按钮都会刷新您的页面。
Most of your buttons have the same id. 您的大多数按钮具有相同的ID。 Id is supposed to be unique. ID应该是唯一的。

You are anyways passing the button element as argument to the addDisp function on click. 无论如何，您都是在单击时将button元素作为参数传递给addDisp函数。 Use it to fetch the value. 用它来获取值。

JavaScript不适用于计算器

问题描述

1 个解决方案

解决方案1
0 2018-01-30 18:19:14

JavaScript不适用于计算器

问题描述

1 个解决方案

解决方案1 0 2018-01-30 18:19:14

解决方案1
0 2018-01-30 18:19:14