javascript - 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 语句。它们都评估为 false，代码继续。

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

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

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