获取错误'无法读取属性'未定义的属性'getAttribute'
问题描述:
下面是我的代码。任何时候,我点击一个卡,我得到的错误在我的控制台:获取错误'无法读取属性'未定义的属性'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();
答
在你this
是上下文指的是功能checkForMatch()
,不flipCard()
,如果你使用this
在flipCard()
,它会工作,因为它指的是cardElement
意义。 this
里面的checkForMatch()
指的是功能,不是,cardElement
。
您可以做的是将this.setAttribute('src', this.cardImage);
替换为this
假设的值。
答
您不应该使用箭头功能,因为在箭头功能中,this
指向的是父范围。因此this
是undefined
。使用箭头功能时应谨慎。
+0
谢谢。我会阅读箭头功能以获得更好的理解 –
谢谢你。我会做出改变。我仍然在我的flipCard()的第一行出现同样的错误。 –
Kermit说什么,箭头功能指向父母,所以它选择'游戏板'。把'this'改成'cardElement' –