如何比较javascript中的三张牌

Question

I am attempting to modify a memory game and match three cards when selected. However I don't seem to be able to select the third card thus my matchThreeCards function is not working. Should I use a different approach in loading and checking which card is selected? Any recommendations?. Hope this code is readable enough for you to understand.

My script

var cardFront = document.createElement("div");
var gameOneButton = document.querySelector("#gameOneButton");
var gameTwoButton = document.querySelector("#gameTwoButton");
var gameThreeButton = document.querySelector("#gameThreeButton");
var gameBoard = document.querySelector(".gameBoard");

let hasCard = false;
let cardOne, cardTwo, cardThree, cardFour;
let match = document.getElementById("modalContainer");
// game1Array = [];

class Card {
  constructor(bacface) {
    this.backface = bacface;
  }

  newCard() {
    var card = document.createElement("div"); //data attribute
    card.className = "card";
    card.setAttribute("data-color", this.backface);

    var cardFront = document.createElement("div");
    cardFront.className = "cardFront";

    var cardBack = document.createElement("div");
    cardBack.className = this.backface;

    card.appendChild(cardFront);
    card.appendChild(cardBack);

    gameBoard.append(card); //addcards
    card.addEventListener("click", cardFlip);
  }
}


cardGreen = new Card("cardGreen");
cardBlue = new Card("cardBlue");
cardYellow = new Card("cardYellow");
cardPink = new Card("cardPink");
cardBlack = new Card("cardBlack");
cardOrange = new Card("cardOrange");
cardPurple = new Card("cardPurple");
cardGray = new Card("cardGray");
cardDarkRed = new Card("cardDarkRed");
cardCyan = new Card("cardCyan");
cardDarkBlue = new Card("cardDarkBlue");
cardBrown = new Card("cardBrown");


var basicMode = [cardGreen, cardBlue,  cardYellow, cardPink, cardGray, cardBlack,
                  cardGreen, cardBlue,  cardYellow, cardPink, cardGray, cardBlack,
];

var enhancedMode = [cardGreen, cardGreen,  cardGreen, cardPink, cardGray, cardBlack,
                     cardGreen, cardBlue,  cardYellow, cardPink, cardGray, cardBlack,
                     cardOrange, cardPurple, cardDarkRed, cardCyan, cardDarkBlue, cardBrown,
                     cardOrange, cardPurple, cardDarkRed, cardCyan, cardDarkBlue, cardBrown,
];


gameOneButton.addEventListener("click", renderEasyMode);
gameTwoButton.addEventListener("click", renderEasyMode);

function renderEasyMode(e) {
  if (e.target == gameOneButton) {
    basicMode.forEach(card => card.newCard());
  } else if (e.target == gameTwoButton) {
    enhancedMode.forEach(card => card.newCard());
}
  gameBoard.style.display = "grid";
  gameOneButton.removeEventListener("click",renderEasyMode);
  gameTwoButton.removeEventListener("click",renderEasyMode);
}

function cardFlip() {
  this.classList.add("flip");
  if (!hasCard) {
    hasCard = true; //set when first card is clicked
    cardOne = this;

  } else if (cardOne){
    hasCard = false; //set when second card is clicked
    cardTwo = this;

  } else if(cardOne && cardTwo){
    hasCard =true;
    cardThree = this;
    console.log(this)

    matchThreeCards();

  }
}

function matchThreeCards() {
  //match Cards
  if (cardOne.dataset.color === cardTwo.dataset.color === cardThree.dataset.color) {
    cardOne.removeEventListener("click", cardFlip);
    cardTwo.removeEventListener("click", cardFlip);
    cardThree.removeEventListener("click", cardFlip);

    match.style.display = "flex";
    setTimeout(removeCards, 2000);
  } else {
    setTimeout(() => {
      //Time out is used for space in between button clicks
      cardOne.classList.remove("flip");
      cardTwo.classList.remove("flip");
      cardThree.classList.remove("flip");
    }, 1500);
  }
}

Answer 1

The expression

cardOne.dataset.color === cardTwo.dataset.color === cardThree.dataset.color

is evaluated as

(cardOne.dataset.color === cardTwo.dataset.color) === cardThree.dataset.color

which is either

true === cardThree.dataset.color

or

false === cardThree.dataset.color

and always returns false in your case, because cardThree.dataset.color is neither true nor false .

You can compare three values with

cardOne.dataset.color === cardTwo.dataset.color && cardTwo.dataset.color === cardThree.dataset.color

Example:

 const a = 3; const b = 3; const c = 3; const d = 4; console.log(a === b === c); console.log(a === b && b === c); console.log(a === b && b === d);