I'；我不熟悉JavaScript和I'；我在想我哪里出了错

我一直在犯这个错误，我不知道该怎么办？我正在努力 做一个纸牌游戏。 未捕获的TypeError:无法读取未定义的属性“getAttribute” 在flipCard上（main.js:42） 在createBoard（main.js:53） 在main.js:59

var卡=[
{
排名：'女王'，
西装：“钻石”，
cardImage:'images/queen of diamonds.png'
},
{
排名：'女王'，
西装：“红心”，
cardImage:'图片/红心皇后.png'
},
{
排名：'国王'，
西装：“钻石”，
cardImage:'图像/钻石之王.png'
},
{
排名：'国王'，
西装：“红心”，
CardMage:“图像/红心之王.png”
}
]
var cardsInPlay=[卡片]
var checkForMatch=函数（）{
this.cardImage.setAttribute（src）
if（cardsInPlay[0]==cardsInPlay[1]）{
window.alert（'找到匹配项！'）
}否则{
window.alert（'抱歉，再试一次'）
}
}
var flipCard=功能（cardId）{
this.cardd.getAttribute（'data-id'））
checkForMatch（）
console.log（'User fliped'+卡片[cardd].rank）
console.log（'User fliped'+卡片[cardId].cardImage）
console.log（'User fliped'+卡片[cardd].suit）
}
函数createBoard（）{
对于（变量i=0；i

此处：

cardElement.addEventListener('click', flipCard())

您正在调用flipCard，而不是传递函数引用。 尝试相应地更改代码

var flipCard = function(cardId) {
  //no need of 'this' here
  cardId.getAttribute('data-id')
  checkForMatch()
  console.log('User flipped ' + cards[cardId].rank)
  console.log('User flipped ' + cards[cardId].cardImage)
  console.log('User flipped ' + cards[cardId].suit)
}

function 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.bind(null, cardElement))
    cardElement.appendChild(game-board)
  }
}

var flipCard=功能（cardd）{
//这里不需要“这个”
cardd.getAttribute（'data-id'）
checkForMatch（）
console.log（'User fliped'+卡片[cardd].rank）
console.log（'User fliped'+卡片[cardId].cardImage）
console.log（'User fliped'+卡片[cardd].suit）
}
函数createBoard（）{
对于（变量i=0；i

checkForMatch中不会有

这个

值，因为它是在全局空间中定义的，您直接调用它。您可能想使用

call

调用它：

var flipCard = function(cardId) {
  //no need of 'this' here
  cardId.getAttribute('data-id')
  checkForMatch()
  console.log('User flipped ' + cards[cardId].rank)
  console.log('User flipped ' + cards[cardId].cardImage)
  console.log('User flipped ' + cards[cardId].suit)
}

function 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.bind(null, cardElement))
    cardElement.appendChild(game-board)
  }
}

checkForMatch.call(this);