Javascript 获取错误'；无法读取属性'；getAttribute'；未定义的'；

下面是我的代码。每当我点击其中一张卡时，我的控制台就会出现错误：

无法读取未定义的属性“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();

var卡=[
{
“等级”：“女王”，
“西装”：“红心”，
“cardImage”：“images/queen of hearts.png”
},{
“等级”：“女王”，
“西装”：“钻石”，
“cardImage”：“images/queen of diamonds.png”
},{
“等级”：“国王”，
“西装”：“红心”，
“cardImage”：“images/king of hearts.png”
},{
“等级”：“国王”，
“西装”：“钻石”，
“cardImage”：“images/king of diamonds.png”
}
]
var cardsInPlay=[]；
var checkForMatch=函数（）{
this.setAttribute（'src'，this.cardImage）；
如果（cardsInPlay.length==2）{
cardsInPlay[0]==cardsInPlay[1]？警报（“您找到了匹配项！”）：警报（“对不起，再试一次”）；
}
}
var flipCard=（）=>{
var cardId=this.getAttribute（'data-id'）；
log（`User fliped${cards[cardd].rank}`）；
cardsInPlay.push（卡片[cardd].rank）；
console.log（卡片[cardId].cardImage）；
console.log（卡片[cardd].suit）；
checkForMatch（）；
}
var createBoard=（）=>{
对于（变量i=0；i

---

这个

在您的上下文中指的是函数

checkForMatch（）

，而不是

flipCard（）

，这意味着如果您在

flipCard（）

中使用

这个

，它将起作用，因为它指的是

cardElement

此
内部
checkForMatch（）
指的是函数，不是，
cardElement

您可以做的是替换
this.setAttribute（'src'，this.cardImage）
，这个
在你的上下文中是指函数
checkForMatch（）
，而不是
flipCard（）
，这意味着如果你在
flipCard（）
中使用
这个
，它会起作用，因为它指的是
cardElement
此
内部
checkForMatch（）
指的是函数，不是，
cardElement

您可以做的是替换
this.setAttribute（'src'，this.cardImage）
，这是一个什么样的
，
你不应该使用arrow函数，因为在arrow函数中，
这是指向父范围的。所以
这是一个
未定义的
。使用箭头函数时应小心。
不应使用箭头函数，因为在箭头函数中，
此
指向父范围。因此
此
未定义。使用箭头功能时要小心。
谢谢。我会做出改变。我的flipCard（）的第一行仍然出现同样的错误。正如Kermit所说，箭头函数指向父对象，因此它选择了
游戏板
。将
此
更改为
cardElement
谢谢。我会做出改变。我的flipCard（）的第一行仍然出现同样的错误。正如Kermit所说，箭头函数指向父对象，因此它选择了
游戏板
。将此
更改为
cardElement
谢谢。为了更好地理解坦克，我将通读箭头功能。为了更好地理解，我将阅读箭头功能