Question

我正在创建一个简单的计算器（截至目前）将对单位数字执行算术运算。我的代码不完整且极其冗余，请不要对此发表评论。

<!doctype html>
<html>
<head>

    <title>Learning JavaScript</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">

        body {
            font-family: "Courier New", Courier, monospace;
        }

        .break {
            clear: both;
        }

        .row ul {
            width: 100%;
            float: left;
            margin: 0;
            padding: 0;
        }

        .row li {
            margin: 0;
            list-style: none;
            float: left;
            font-size: 3em;
            padding: 15px;
        }

        .row li:hover {
            border-bottom: 1px black solid;
        }

        #answer {
            font-size: 3em;
            padding: 15px;
            font-weight: bold;
        }

    </style>

</head>

<body>

    <ul class="row">
        <li id="number1">1</li>
        <li id="number2">2</li>
        <li id="number3">3</li>
        <li id="add">+</li>
    </ul>

    <div class="break" ></div>

    <ul class="row">
        <li id="number4">4</li>
        <li id="number5">5</li>
        <li id="number6">6</li>
        <li id="subtract">-</li>
    </ul>

    <div class="break" ></div>

    <ul class="row">
        <li id="number7">7</li>
        <li id="number8">8</li>
        <li id="number9">9</li>
        <li id="multiply">*</li>
    </ul>

    <div class="break" ></div>

    <ul class="row">
        <li id="divide">/</li>
        <li id="number0">0</li>
        <li id="clear">Clear</li>
    </ul>

    <div class="break" ></div>

    <p id="answer"></p> 

    <script type="text/javascript">

        var a;
        var b;

        var order = false;

        if (order == false) {

            document.getElementById("number0").onclick = function() {
                a = document.getElementById("number0").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number1").onclick = function() {
                a = document.getElementById("number1").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number2").onclick = function() {
                a = document.getElementById("number2").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number3").onclick = function() {
                a = document.getElementById("number3").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number4").onclick = function() {
                a = document.getElementById("number4").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number5").onclick = function() {
                a = document.getElementById("number5").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number6").onclick = function() {
                a = document.getElementById("number6").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number7").onclick = function() {
                a = document.getElementById("number7").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number8").onclick = function() {
                a = document.getElementById("number8").innerHTML;
                console.log("a is " + a);
                order = true;
            }

            document.getElementById("number9").onclick = function() {
                a = document.getElementById("number9").innerHTML;
                console.log("a is " + a);
                order = true;
            }
        } else if (order == true) {
            document.getElementById("number0").onclick = function() {
                b = document.getElementById("number0").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number1").onclick = function() {
                b = document.getElementById("number1").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number2").onclick = function() {
                b = document.getElementById("number2").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number3").onclick = function() {
                b = document.getElementById("number3").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number4").onclick = function() {
                b = document.getElementById("number4").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number5").onclick = function() {
                b = document.getElementById("number5").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number6").onclick = function() {
                b = document.getElementById("number6").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number7").onclick = function() {
                b = document.getElementById("number7").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number8").onclick = function() {
                b = document.getElementById("number8").innerHTML;
                console.log("b is " + b);
            }

            document.getElementById("number9").onclick = function() {
                b = document.getElementById("number9").innerHTML;
                console.log("b is " + b);
            }
        }

    </script>

</body>
</html>

如果单击计算器中的数字，我将布尔“order”设置为true，以便单击下一个数字分配给“b”。但是，如果我在计算器中单击另一个数字，程序仍会将“a”设置为该数字，而不是将该数字设置为“b”。这是范围问题吗？请原谅任何愚蠢的错误，我刚刚开始学习网页设计。

Answer 1

在点击处理程序中测试order变量，而不是在绑定它们时。

document.getElementById("number0").onclick = function() {
    if (order == false) {
        a = parseInt(document.getElementById("number0").innerHTML, 0);
        console.log("a is " + a);
        order = true;
    } else {
        b = parseInt(document.getElementById("number0").innerHTML, 0);
        console.log("b is " + b);
    }
}

Answer 2

您的代码出现问题。

您的代码只执行一次，所以当order == true时，事件永远不会被绑定。

我建议你必须这样做。在每个数字的事件中移动您的条件。

document.getElementById("number0").onclick = function() {
                if(order == false)
                {
                a = document.getElementById("number0").innerHTML;
                console.log("a is " + a);
                order = true;
                }
                else{
                  b = document.getElementById("number0").innerHTML;
                  console.log("b is " + b);
                }
            }

Answer 3

问题是你的脚本只加载一次所以你的onclick（）函数设置了一次，因为order设置为false，你的事件总会产生相同的行为。

为了更清楚，订单的价值会发生变化，但与DOM元素相关的事件不会再次设置。

关于冗余，我建议你使用这样的东西吗？

    var numbers = [];

    var OnClickNumber = function(event) {
         number = document.getElementById(event.target).innerHTML;
         numbers.push[number];
         console.log(number[number.length-1]);
    }

    for(i=0;i<=9;i++) {
        document.getElementById("number"+i).onclick = OnClickNumber(); 
    }

这样可以减少代码的痛苦和可读性。单击的数字将添加到数组编号中，然后您可以操作数字[]的值来进行操作。

希望它对你有所帮助。

Answer 4

您的支票只会运行一次，因此order==false条件下的所有功能都会被绑定。

尝试此操作而不是全局条件：

document.getElementById("number0").onclick = function () {
                a = document.getElementById("number0").innerHTML;
                if (order === false) {
                    console.log("a is " + a);
                    order = true;
                }
                else
                {
                    console.log("b is " + a);
                    order = false;
                }
            }

为什么赢得我的布尔变化？

4 个答案: