出现错误'无法读取未定义的属性'getAttribute''答案

【问题标题】：Getting error 'Cannot read property 'getAttribute' of undefined'出现错误'无法读取未定义的属性'getAttribute''
【发布时间】：2017-04-25 00:14:31
【问题描述】：

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

无法读取未定义的属性“getAttribute”

为什么会这样？

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();

【问题讨论】：

标签： javascript undefined

【解决方案1】：

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

您可以做的是将this.setAttribute('src', this.cardImage); 替换为this 本来的样子。

【讨论】：

谢谢。我会做出这样的改变。我的 FlipCard() 的第一行仍然出现同样的错误。
这是Kermit所说的，箭头函数指向父函数，所以它选择game-board。将this 更改为cardElement

【解决方案2】：

你不应该使用箭头函数，因为在箭头函数中，this 指向父作用域。所以this 是undefined。使用箭头函数时要小心。

【讨论】：

谢谢。我将阅读箭头函数以更好地理解