javascript - 获取错误 'Cannot read property ' getAttribute' of undefined'

Question

这是我的代码。每当我单击其中一张卡片时，我都会在控制台中收到错误消息:

Cannot read property 'getAttribute' of undefined

为什么会发生这种情况？

var cards = [
{
    "rank": "queen",
    "suit":"hearts",
    "cardImage": "images/queen-of-hearts.png"
},{
    "rank": "queen",
    "suit":"diamonds",
    "cardImage": "images/queen-of-diamonds.png"
},{
    "rank": "king",
    "suit":"hearts",
    "cardImage": "images/king-of-hearts.png"
},{
    "rank": "king",
    "suit":"diamonds",
    "cardImage": "images/king-of-diamonds.png"
}

]

var cardsInPlay = [];

var checkForMatch = function() {
    this.setAttribute('src', this.cardImage);
    if(cardsInPlay.length === 2) {
        cardsInPlay[0] === cardsInPlay[1]?alert('You found a match!'):alert('Sorry, try again.');
    }
}

var flipCard = () => {
    var cardId = this.getAttribute('data-id');
    console.log(`User flipped ${cards[cardId].rank}`);
    cardsInPlay.push(cards[cardId].rank);
    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);

    checkForMatch();
}

var createBoard = () => {
    for (var i = 0; i < cards.length; i ++) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute('src','images/back.png');
        cardElement.setAttribute('data-id', i);
        cardElement.addEventListener('click', flipCard);
        document.getElementById('game-board').appendChild(cardElement);
    }

}

createBoard();

Answer 1

this 在您的上下文中指的是函数 checkForMatch()，而不是 flipCard()，这意味着如果您要使用flipCard() 中的 this 会起作用，因为它引用了 cardElement。 checkForMatch() 中的 this 引用的是函数，不是，cardElement。

您可以做的是将 this.setAttribute('src', this.cardImage); 替换为 this 的预期内容。