如何通过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);
            }
        };
    })();

Answer 1

我不确定switchLoop函数的作用，但是每次灯泡更改状态时，您都在调用win函数吗？

我认为win函数仅在页面加载时才被调用，因为它放在了自己的脚本标签中。 如果您不是从script标记中调用win函数，请尝试在用户单击灯泡或灯泡状态更改时调用它。

Answer 2

根据我的理解，下面是相同的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>