Vanilla JavaScript Flip Card game not working

Question

I'm making simple flip card game that will lock the cards in the flip position if the two cards match and switch them back to the rest position if they don't match. When the first pair of cards are flipped whether it's a match or not, the game works properly. The problem is when I click on a third card, the console returns the error:

"Uncaught TypeError: Cannot read property 'dataset' of null at checkForMatch at HTMLDivElement.flipCard"

How could I address this problem?

// * Declaring Varaibles
// Get cards on the board
const cards = document.querySelectorAll(".card");
let isCardFlipped = false;
let lockBoard = false;
let firstCard, secondCard;

// * Functions
// Flips cards over
function flipCard() {
  if (lockBoard) return;
  if (this === firstCard) return;

  // Adding class name "flip" to all HTML elments with the class name "card"
  this.style.transform = "rotateY(180deg)";

  if (!isCardFlipped) {
    isCardFlipped = true;
    firstCard = this;

    return;
  }

  secondCard = this;
  checkForMatch();
}

// Checks to see if the cards match
function checkForMatch() {
  let isMatch = firstCard.dataset.monke === secondCard.dataset.monke;

  // isMatch ? disableCards() : unflipCards();

  if (isMatch) {
    disableCards();
  }
  else {
    unflipCards();
  }
}

// Locks the cards in place if they match
function disableCards() {
  firstCard.removeEventListener("click", flipCard);
  secondCard.removeEventListener("click", flipCard);

  resetBoard();
}

// Flips the cards back over if they don't match
function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.style.transform = "";
    secondCard.style.transform = "";

    resetBoard();
  }, 1000);

}

// Resets the board
function resetBoard() {
  [hasFlippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

// * Event Listeners
// Event listener for all the cards
cards.forEach((item) => {
  item.addEventListener("click", flipCard);
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Londrina Solid", cursive;
}

body {
    background: linear-gradient(180deg, rgb(34, 179, 34), rgb(163, 126, 57));
    height: 100vh;
}

.container {
    padding: 1rem;
    width: 100%;
    height: 100%;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 3rem;
    color: #000;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 2rem;
    padding-top: 1rem;
}

.card-container {
    position: relative;
    margin: auto;
    width: 150px;
    height: 200px;
}

.card {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s ease;
}

.front-face {
    position: absolute;
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
    background: rgb(244, 238, 86);
    border-radius: 10px;
}

.back-face {
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.pic-container {
    height: 200px;
    width: 150px;
}

img {
    height: 100%;
    width: 100%;
    border-radius: 10px;
}




  
  
  
  
  
  Matching Game


  
    Monke Matching Game

user_15173048 · Answer

The board game is reset after the onclick event, it calls this resetBoard() function and sets the firstCard variables to null. During the next event the variable is null.

Delete this line

// Resets the board
function resetBoard() {
  [hasFlippedCard, lockBoard] = [false, false];
  //[firstCard, secondCard] = [null, null];
}

user_7924377 · Answer

You forget to set isCardFlipped to false after un-flipping cards or disabling cards.

// * Declaring Varaibles
// Get cards on the board
const cards = document.querySelectorAll(".card");
let isCardFlipped = false;
let lockBoard = false;
let firstCard, secondCard;

// * Functions
// Flips cards over
function flipCard() {
  if (lockBoard) return;
  if (this === firstCard) return;

  // Adding class name "flip" to all HTML elments with the class name "card"
  this.style.transform = "rotateY(180deg)";

  if (!isCardFlipped) {
    isCardFlipped = true;
    firstCard = this;

    return;
  }

  secondCard = this;
  checkForMatch();
}

// Checks to see if the cards match
function checkForMatch() {
  let isMatch = firstCard.dataset.monke === secondCard.dataset.monke;
  // isMatch ? disableCards() : unflipCards();

  if (isMatch) {
    disableCards();
  }
  else {
    unflipCards();
  }
}

// Locks the cards in place if they match
function disableCards() {
  firstCard.removeEventListener("click", flipCard);
  secondCard.removeEventListener("click", flipCard);
  isCardFlipped = false;
  resetBoard();
}

// Flips the cards back over if they don't match
function unflipCards() {
  lockBoard = true;
  isCardFlipped = false;
  setTimeout(() => {
    firstCard.style.transform = "";
    secondCard.style.transform = "";

    resetBoard();
  }, 1000);

}

// Resets the board
function resetBoard() {
  [hasFlippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

// * Event Listeners
// Event listener for all the cards
cards.forEach((item) => {
  item.addEventListener("click", flipCard);
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Londrina Solid", cursive;
}

body {
    background: linear-gradient(180deg, rgb(34, 179, 34), rgb(163, 126, 57));
    height: 100vh;
}

.container {
    padding: 1rem;
    width: 100%;
    height: 100%;
}

h1 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 3rem;
    color: #000;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 2rem;
    padding-top: 1rem;
}

.card-container {
    position: relative;
    margin: auto;
    width: 150px;
    height: 200px;
}

.card {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s ease;
}

.front-face {
    position: absolute;
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
    background: rgb(244, 238, 86);
    border-radius: 10px;
}

.back-face {
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.pic-container {
    height: 200px;
    width: 150px;
}

img {
    height: 100%;
    width: 100%;
    border-radius: 10px;
}




  
  
  
  
  
  Matching Game


  
    Monke Matching Game

Vanilla JavaScript Flip Card game not working

2 Answers