Make the cells so they cannot be played again.

[bmaiden]

What's the problem you're trying to solve?

Once a match has been determined, figuring out how to make the cells so they cannot be played again.

Post any code you think might be relevant (one fenced block per file)

/*----- state variables -----*/
let board; //an array
let squareColor = [];
let secondMove = true;
let squareOne;
let squareTwo;
let matchesMade = null;
let firstSquare = null;
let secondSquare = null;

function handleMove(event) {
  !secondMove ? (firstSquare = event.target) : (secondSquare = event.target);
  secondMove = !secondMove;
  if (secondMove === false) {
    squareOne = event.target.classList[1];
  } else {
    squareTwo = event.target.classList[1];
    if (squareOne === squareTwo) {
      // event.target.removeEventListener("click", handleMove)
      // firstSquare.removeEventListener("click", handleMove)
      // secondSquare.removeEventListener("click", handleMove)
      matchesMade += 2;

    } else {
      setTimeout(() => {
        firstSquare.style.backgroundColor = "";
        secondSquare.style.backgroundColor = "";

        secondMove ? (firstSquare = event.target) : (secondSquare = event.target);
        console.log("Not a match reset squares", squareOne, squareTwo); //inspect displays no match
      }, 2000);
    }
  }
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

not seeing any unexpected behavior, trying to figure out how to make the cells so they cannot be played again.

What is your best guess as to the source of the problem?

remove the event listener for the matching squares

What things have you already tried to solve the problem?

  // event.target.removeEventListener("click", handleMove)
  // firstSquare.removeEventListener("click", handleMove)
  // secondSquare.removeEventListener("click", handleMove)

Paste a link to your repository here

https://github.com/bmaiden/memory-browser-game

[nayaba]

Your code looks great and you're definitely on the right track with your firsSquare and secondSquare and removing the event listener! The first thing we need to consider is that the event listener that has been added is actually squarePicked (which then calls the handleMove function). So you must remove the same event listener that was added (i.e. squarePicked).

Which brings us to a slight complication. There is a single event listener for the entire board. Once you remove the event listener from firstSquare or secondSquare the whole board will be unclickable. So you'll need to refactor the very last line of your code. I will let you work on figuring that out for a while, but I will mention that you'll need to use something like querySelectorAll and an iterator method like forEach.

[bmaiden]

Still need assistance.

[nayaba]

Can you provide an update on the code you've edited so far?

[bmaiden]

/*---- event listeners -----*/
//click on square to make a move
document.getElementById("board").addEventListener("click", squarePicked);
document.getElementById("board").addEventListener("click", handleMove(firstSquare));
document.getElementById("board").addEventListener("click", handleMove(secondSquare));

function handleMove(firstSquare, secondSquare) {
  return function curried_func(event) {
    !secondMove ? (firstSquare = event.target) : (secondSquare = event.target);
    // console.log(secondMove)                //truthy
    //prevent more than two clicks by toggling (hide or show) second move
    secondMove = !secondMove;
    // console.log(secondMove)                  //inspect displays value
    // console.log('bang', !secondMove)         //inspect displays value using the bang operator
    // console.log (event.target.classList)     //inspect displays color associated with square clicked
    if (secondMove === false) {
      squareOne = event.target.classList[1];
      console.log(squareOne); //inspect displays color of square
    } else {
      squareTwo = event.target.classList[1];
      console.log(squareTwo); //inspect displays color of square
      if (squareOne === squareTwo) {
        // event.target.removeEventListener("click", handleMove)
        // firstSquare.removeEventListener("click", handleMove(firstSquare))
        // secondSquare.removeEventListener("click", handleMove(secondSquare))
        matchesMade += 2;
        console.log("It matches", matchesMade, squareOne, squareTwo); //inspect displays if match
      } else {
        setTimeout(() => {
          firstSquare.style.backgroundColor = "";
          secondSquare.style.backgroundColor = "";

          secondMove
            ? (firstSquare = event.target)
            : (secondSquare = event.target);
          console.log("Not a match reset squares", squareOne, squareTwo); //inspect displays no match
        }, 1000);
      }
    }
  }
};

[bmaiden]

Was thinking trying to pass the variables as an argument would be easier but am stuck again on how to proceed. When I uncomment removeEventListener for firstSquare and secondSquare I get the below error.

[bmaiden]

Here is what I was looking at. Article link: https://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function

[nayaba]

Good updates. Rather than having three event listeners though, let's try and re-factor one event listener:

document.getElementById("board").addEventListener("click", squarePicked);

into another event listener that will iterate over the board and get each individual square and add an event listener to it, like this

const squares = document.querySelectorAll('#board > div')
console.log(squares)
squares.addEventListener("click", squarePicked)

Like I mentioned before when you remove the event listener, like you have in this commented out code inside your handleMove function:

firstSquare.removeEventListener("click", handleMove(firstSquare))

you need to remove the same event listener callback function that you added --> well we added squarePicked, didn't we? So that's what we'll need to remove, and we'll want to remove it from firstSquare and secondSquare, but not the whole board (otherwise we wouldn't be able to click on anything). Lastly, when we remove an event listener, we don't need to pass any arguments to the callback function, or even invoke it. So just like our parenthesis in our addEventListener look like this ("click", squarePicked), it will look the same when we removeEventListener.

[bmaiden]

New coding with error message:

/*---- event listeners -----*/
//click on square to make a move
// document.getElementById("board").addEventListener("click", squarePicked);
document.getElementById("board").addEventListener("click", function () {
  const squares = document.querySelectorAll('#board > div')
  console.log("squares event listener",squares)
  squares.addEventListener("click", squarePicked)
});

[bmaiden]

Adding it to the if statement:

      if (squareOne === squareTwo) {
          const squares = document.querySelectorAll('#board > div')
          console.log("squares event listener",squares)
          squares.addEventListener("click", squarePicked)
        // event.target.removeEventListener("click", handleMove)
        // firstSquare.removeEventListener("click", handleMove(firstSquare))
        // secondSquare.removeEventListener("click", handleMove(secondSquare))
        matchesMade += 2;
        console.log("It matches", matchesMade, squareOne, squareTwo); //inspect displays if match

get error message:

[nayaba]

Go ahead and delete this line:

document.getElementById("board").addEventListener("click", function () {

as well as it's closing curly bracket. We're replacing it, not adding to it.

[bmaiden]

John & Jacob have tried assisting me and we still can not get the squares to be un-clickable. Could I get a 1:1 meeting?

[bmaiden]

Changing from making matches to a time limit.

[bmaiden]

Tylus assisted with making the cells so they cannot be played again.