When trying to play again after playing again, one of the squares don't color-CodePudding

https://jsfiddle.net/h0avkn8p/is my entire code

When you play the game twice, you will see that the correct square position from the last game stays white, does anyone know where the problem is? I think it is coming from this part of my code.

function genSquareColors(){
    if(arr.length > 0){
        arr.splice(0, arr.length);
    }
    for(let i = 0; i < 5; i  ){
        arr.push(genWrong()); // generates five incorrect squares
    }
    arr.push(answer);
    scramble(arr);
    console.log(arr);
    return arr;
   
}

function setColor(){
    for(let i = 0; i < squares.length; i  ){
        squares[i].style.backgroundColor = arr[i];  
    }

} 

function colorSquares(){
    for(let i = 0; i < squares.length; i  ){
        squares[i].addEventListener("click", function(){
            var clicked = this.style.backgroundColor;
            if(clicked === answer){
                alert("You won!");
                reset();
                this.style.backgroundColor = setColor();
             } else {
                this.style.backgroundColor = "#FFFFFF";
                tries--;
            }
        });

    }
}

CodePudding user response：

I see that here:

function colorSquares(){
    for(let i = 0; i < squares.length; i  ){
        squares[i].addEventListener("click", function(){

You're attaching a new event listener to each square every time the game runs. So, starting on the second game, a click will produce two results for each listener. On the third game, there will be three results - etc. So a click can result in a square both "winning", and being colored white.

Either save a reference to each listener in a persistent variable, then call removeEventListener with each one of them - or use .onclick instead, so that only the latest assignment is kept.

function colorSquares(){
    for(let i = 0; i < squares.length; i  ){
        squares[i].onclick = function(){
            var clicked = this.style.backgroundColor;
            if(clicked === answer){
                alert("You won!");
                reset();
                this.style.backgroundColor = setColor();
             } else {
                this.style.backgroundColor = "#FFFFFF";
                tries--;
            }
        };

    }
}

CodePudding user response：

Whats going on here is your event listener is being created on the same items over and over and never being cleaned up. If you console.log out the in the event IE.

    for(let i = 0; i < squares.length; i  ){
        squares[i].addEventListener("click", function(){
            var clicked = this.style.backgroundColor;
            console.log("oh no!")
            if(clicked === answer){
                alert("You won!");
                reset();
                this.style.backgroundColor = setColor();
             } else {
                this.style.backgroundColor = "#FFFFFF";
                tries--;
            }
        });

    }
}

You will notice that the click event is being called many times.

The fix would be to store the event once its applied and then if the event is set, reset it. IE.

https://jsfiddle.net/CynderRnAsh/aukbnsp1/8/

Or apply the event only once ie. https://jsfiddle.net/CynderRnAsh/aukbnsp1/11/