javascript - 如何通过 JavaScript 中的条件触发警报框？

Question

我是 JavaScript 语言的新手，而且我已经在游戏上工作了几天了。游戏是当用户点击灯泡时，它会亮起。每个灯泡都会影响另一个灯泡。我的问题是，我检查所有灯泡是否都打开的代码似乎不起作用。如果游戏已经完成，应该有一个警告框。

我试图有一些功能，然后在 html 正文中调用它。

        function win() {
            var allBulb = [document.getElementById("b1"), 
                           document.getElementById("b2"), 
                           document.getElementById("b3"),                       
                           document.getElementById("b4"), 
                           document.getElementById("b5"), 
                           document.getElementById("b6"),
                           document.getElementById("b7"), 
                           document.getElementById("b8"), 
                           document.getElementById("b9")];
            var index = 0;
            for(var i = 0; i < allBulb.length; i++) {
                if (allBulb[i].src.match("turnON")) {
                    index += 1;
                }
            }
            if (index == 9) {
                alert("Congratulations!");
            }
        }

<script>win();</script>

    //this is how I call my function in the html body
    <script>win();</script>

对于那些询问的人，这是我的 b1 到 b9 代码：

<div class = "main">
        <table>
            <tr>
                <td><img id = "b1" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b1()"></td>
                <td><img id = "b2" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b2()"></td>
                <td><img id = "b3" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b3()"></td>
            </tr>
            <tr>
                <td><img id = "b4" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b4()"></td>
                <td><img id = "b5" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b5()"></td>
                <td><img id = "b6" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b6()"></td> 
            </tr>
            <tr>
                <td><img id = "b7" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b7()"></td>
                <td><img id = "b8" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b8()"></td>
                <td><img id = "b9" src = "turnOFF.png" style = "width:100px" 
                     onclick = "bulbFunc.b9()"></td>
            </tr>
</div>

这是我打开和关闭灯泡的功能。顺便说一句，这些灯泡表示为按钮。

const bulbFunc = (() => {
        return {
            b1: () => {
                btnB1 = [document.getElementById("b1"), 
                         document.getElementById("b5")];
                switchLoop(btnB1);
            },
            b2: () => {
                btnB2 = [document.getElementById("b2"), 
                         document.getElementById("b4"), 
                         document.getElementById("b6")];
                switchLoop(btnB2);
            },
            b3: () => {
                btnB3 = [document.getElementById("b3"), 
                         document.getElementById("b2")];
                switchLoop(btnB3);
            },
            b4: () => {
                btnB4 = [document.getElementById("b4")];
                switchLoop(btnB4);
            },
            b5: () => {
                btnB5 = [document.getElementById("b5"), 
                         document.getElementById("b8")];
                switchLoop(btnB5);
            },
            b6: () => {
                btnB6 = [document.getElementById("b6"), 
                         document.getElementById("b7")];
                switchLoop(btnB6);
            },
            b7: () => {
                btnB7 = [document.getElementById("b7")];
                switchLoop(btnB7);   
            },
            b8: () => {
                btnB8 = [document.getElementById("b8")];
                switchLoop(btnB8);
            },
            b9: () => {
                btnB9 = [document.getElementById("b9"), 
                         document.getElementById("b4")];
                switchLoop(btnB9);
            }
        };
    })();

标签： javascriptdialog

Answer 1

据我了解，以下是相同的 js 和 HTML：我无法上传图片。turnON.png 和 turnOFF.png 分别用于打开和关闭灯泡。

当您单击最后一个灯泡时，还会显示警报框。

		function isBulbON(img){
     		return img.src.indexOf("turnON.png") > -1;
		}
          
		function toggle(sender){
			sender.src = isBulbON(sender) ? "turnOFF.png" : "turnON.png";
               if(Array.from(document.getElementsByClassName("bulb")).every(isBulbON)===true){
                    alert("All bulb ON");
               }
		}

<div class = "main">
                <table>
                    <tr>
                        <td><img class="bulb" id = "b7" src = "turnOFF.png" style = "width:100px" 
                             onclick = "toggle(this)"/></td>
                        <td><img class="bulb" id = "b8" src = "turnOFF.png" style = "width:100px" 
                             onclick = "toggle(this)"/></td>
                        <td><img class="bulb" id = "b9" src = "turnOFF.png" style = "width:100px" 
                             onclick = "toggle(this)"/></td>
                    </tr>
                </table>
        </div>