Javascript 暂时禁用方形的单击事件侦听器（颜色选择器游戏）

我正在制作RGB颜色选择器游戏。 游戏生成由

6

颜色方块组成的随机网格，并从这6个颜色方块中选择随机RGB颜色，如果玩家从网格中选择了正确的RGB颜色，则所有

6

方块都变成了该颜色，他赢得了这轮比赛，但如果他从网格中选择了任何不正确的颜色，则颜色将隐藏。隐藏它的逻辑我只是把颜色变成背景色

我向网格的每个方块添加了单击事件侦听器。我的问题是，我希望此事件侦听器在游戏的每一轮中仅工作1次，因此如果玩家选择了错误的颜色，则颜色方块将隐藏，单击事件侦听器将暂时禁用。如果他单击了右键颜色，则单击事件侦听器也将被禁用

如果有其他方法可以隐藏错误的方形颜色，请说明。

游戏界面如下所示：

此问题的代码块：

var colors = generateRandomColors(6);

var squares = document.querySelectorAll(".square");
var pickedColor = pickColor();
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.getElementsByTagName("h1")[0];
var resetBtn = document.getElementById("reset");

colorDisplay.textContent = pickedColor;

// add click listener to new colors button
resetBtn.addEventListener("click",function(){
       reset();
});

for (var i = 0; i < squares.length; i++) {
    // add intial colors to squares
     squares[i].style.backgroundColor = colors[i];  
    // add click listeners to squares
    squares[i].addEventListener("click",function(){
        // grab color of clicked square
        var clickedColor = this.style.backgroundColor;
        // compare color to pickedColor
        if(clickedColor === pickedColor){
            changeColors(clickedColor);
            h1.style.backgroundColor = clickedColor;
            resetBtn.textContent = "Play Again";
            messageDisplay.textContent = "Correct!";
        }
        else{
            this.style.backgroundColor = "#232323";
            messageDisplay.textContent = "Try Again!";
        }
    });
}

var colors=generateRandomColors（6）；
var squares=document.queryselectoral（“.squares”）；
var pickedColor=pickColor（）；
var colorDisplay=document.getElementById（“colorDisplay”）；
var messageDisplay=document.querySelector（“消息”）；
var h1=document.getElementsByTagName（“h1”）[0]；
var resetBtn=document.getElementById（“重置”）；
colorDisplay.textContent=pickedColor；
//单击“添加侦听器到新颜色”按钮
resetBtn.addEventListener（“单击”，函数（）{
重置（）；
});
对于（变量i=0；i

---

任何建议的帮助都将不胜感激。

在搜索我的问题的解决方案后，在的帮助下，我找到了一种方法，可以在触发后使方形的click event listener仅工作一次。我只需要在

addEventListener（）

中添加另一个参数，即

{once:true}

，这样它就按预期工作了

此外，我还发现了另一种方法，在单击错误的颜色方块后，隐藏方块而不改变其在界面上的位置：

squares[i].style.visibility = "hidden"; 

代码解决方案：

        squares[i].addEventListener("click",function(){
        // grab color of clicked square
        var clickedColor = this.style.backgroundColor;
        // compare color to pickedColor
        if(clickedColor === pickedColor){
            changeColors(clickedColor);
            h1.style.backgroundColor = clickedColor;
            resetBtn.textContent = "Play Again";
            messageDisplay.textContent = "Correct!";
        }
        else{
            // another way to hide the square
             this.style.visibility = "hidden"; 
            //this.style.backgroundColor = "#232323";
            messageDisplay.textContent = "Try Again!";
        }
       },{once: true});

一些评论建议使用

removeEventListener（）

禁用square click事件，但在我的例子中，这是低效的，因为我对每个square使用了

addEventListener（）

上的匿名函数

W3Schools提到了一个关于本案的注释：

要删除事件处理程序，请使用

addEventListener（）

方法必须是外部函数

匿名函数，如“

element.removeEventListener（“事件”，
函数（）{myScript}）；

“将不起作用

---

询问有关其代码的问题，但实际上没有显示it@MohammadOghli尝试添加

squares[i].addEventListener（“单击”，函数（）{….}，{once:true}）

触发后将删除侦听器（）@MohammadOghli will

squares[i].style.visibility=“hidden”

do？@MohammadOghli很乐意提供帮助，这就是为什么我评论提供代码的重要性-它允许我们提供更详细和准确的帮助，而不是一般性的建议：）