Disable click event listener of square temporally (Color Picker Game)

问题

I am working on RGB color picker game. the game generate random grid of 6 color squares and pick a random RGB color from these 6 color squares if the player choose the correct picked RGB color from the grid all 6 squares turned to this color and he won the round but if he choose any incorrect color from grid the color is hiding. logic of hiding it i simply turned the color to be same as the background color.

I added to each square of grid click event listener.my problem that i want this event listener to work only 1 time in each round of the game so if player choose wrong color the color square is hiding and click event listener is disabled temporally also the same if he clicked the right color click event listener should be disabled.

if there is another good way to hide the wrong selected square color please mention it.

game interface look like:

block of code for this problem:

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!";
        }
    });
}

any suggested help would be appreciated.

回答1:

After searching for solution to my problem and with Alon Eitan's help I found a way to make click event listener for square work only once after trigger it.I just need to add another argument to addEventListener() which is {once:true}so it worked as expected.

also I found another method to hide square without changing its position on interface after wrong color square is clicked:

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

code solution :

        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});

some comments suggested to use removeEventListener()to disable square click event but in my case it's inefficient because I use anonymous function on addEventListener()for each square.

W3Schools mentions a Note on this case:

To remove event handlers, the function specified with the addEventListener() method must be an external function.

Anonymous functions, like "element.removeEventListener("event", function(){ myScript });" will not work.

来源：https://stackoverflow.com/questions/43393544/disable-click-event-listener-of-square-temporally-color-picker-game

标签

javascript

dom

event-listener

disabled-input