JavaScript计算器出现问题

Question

尝试为项目创建JavaScript计算器。 我对javascript不太满意，请帮忙。 我没有错误，也没有任何显示。 也许与事件监听器有关。 这是我的脚本：

$(function () {
    "use strict";
    var num1, num2, answer, operation = 0;

    var add = function (num1, num2) {
        var sum = num1 + num2;
        return sum;
    };
    var subtract = function (num1, num2) {
        var diff = num1 - num2;
        return diff;
    };
    var multiply = function (num1, num2) {
        var product = num1 * num2;
        return product;
    };
    var divide = function (num1, num2) {
        var quotient = num1 / num2;
        return quotient.toFixed(4);
    };

    $(".button").click(function () {
        var value = document.getElementById(this);
        switch (value) {
            case "zero":
                if (typeof(operation) == "string") {
                    num2 = 0;
                } else {
                    num1 = 0;
                }
                $("#display").append("0");
                break;
            case "one":
                if (typeof(operation) == "string") {
                    num2 = 1;
                } else {
                    num1 = 1;
                }
                $("#display").append("1");
                break;
            case "two":
                if (typeof(operation) == "string") {
                    num2 = 2;
                } else {
                    num1 = 2;
                }
                $("#display").append(2);
                break;
            case "three":
                if (typeof(operation) == "string") {
                    num2 = 3;
                } else {
                    num1 = 3;
                }
                $("#display").append(3);
                break;
            case "four":
                if (typeof(operation) == "string") {
                    num2 = 4;
                } else {
                    num1 = 4;
                }
                $("#display").append(4);
                break;
            case "five":
                if (typeof(operation) == "string") {
                    num2 = 5;
                } else {
                    num1 = 5;
                }
                $("#display").append(5);
                break;
            case "six":
                if (typeof(operation) == "string") {
                    num2 = 6;
                } else {
                    num1 = 6;
                }
                $("#display").append(6);
                break;
            case "seven":
                if (typeof(operation) == "string") {
                    num2 = 7;
                } else {
                    num1 = 7;
                }
                $("#display").append(7);
                break;
            case "eight":
                if (typeof(operation) == "string") {
                    num2 = 8;
                } else {
                    num1 = 8;
                }
                $("#display").append(8);
                break;
            case "nine":
                if (typeof(operation) == "string") {
                    num2 = 9;
                } else {
                    num1 = 9;
                }
                $("#display").append(9);
                break;
            case "add":
                operation = "+";
                break;
            case "subtract":
                operation = "-";
                break;
            case "multiply":
                operation = "*";
                break;
            case "divide":
                operation = "/";
                break;
            case "equals":
                if (operation == "+") {
                    answer = add(num1, num2);
                    $("#display").html(answer);
                } else if (operation == "-") {
                    answer = subtract(num1, num2);
                    $("#display").html(answer);
                } else if (operation == "*") {
                    answer = multiply(num1, num2);
                    $("#display").html(answer);
                } else if (operation == "/") {
                    answer = divide(num1, num2);
                    $("#display").html(answer);
                }
                else {
                    return;
                }
                break;
            case "clear":
                num1 = "";
                num2 = "";
                operation = 0;
                answer = "";
                $("#display").html(0);
                break;
        }
    });
});

HTML：

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="script.js"></script>

    </head>
    <body>

        <div class="main">

            <div id="display"></div>

            <div class ="button" id="add">+</div>
            <div class ="button" id="subtract">-</div>
            <div class ="button" id="multiply">x</div>
            <div class ="button" id="divide">/</div>

            <div class ="button" id="zero">0</div>
            <div class ="button" id="one">1</div>
            <div class ="button" id="two">2</div>
            <div class ="button" id="three">3</div>
            <div class ="button" id="four">4</div>
            <div class ="button" id="five">5</div>
            <div class ="button" id="six">6</div>
            <div class ="button" id="seven">7</div>
            <div class ="button" id="eight">8</div>
            <div class ="button" id="nine">9</div>

            <div class ="button" id="equals">=</div>
            <div class ="button" id="clear">C</div>

        </div>

    </body>
</html>

Answer 1

要获得单击的按钮的ID，请使用document.getElementbyId() ，按照jQuery的术语，它类似于$('#')选择器，并获取DOM元素，而不是按钮的ID。 为此，请使用$(this).attr('id'); 。

var value = $(this).attr('id');
switch (value) {...}

之所以没有错误，是因为它只是轻描淡写地通过了switch语句，因为它基本上在编写许多if语句。 它们都评估为假，并且代码继续。

提建议，因为您是编程新手。 作为一般规则，最好在switch末尾包含一个default情况。 如果所有其他值均为false，则此代码将运行。

代码末尾的类似内容将有助于调试，以后可能会有用。

case "clear":
       num1 = "";
       num2 = "";
       operation = 0;
       answer = "";
       $("#display").html(0);
       break;
default:
       console.log("ID not recognized!");
       break;
}