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

来源

2017-04-25 Robert Lowe

在你this是上下文指的是功能checkForMatch()，不flipCard()，如果你使用this在flipCard()，它会工作，因为它指的是cardElement意义。 this里面的checkForMatch()指的是功能，不是,cardElement。

您可以做的是将this.setAttribute('src', this.cardImage);替换为this假设的值。

来源

2017-04-25 00:24:06

谢谢你。我会做出改变。我仍然在我的flipCard（）的第一行出现同样的错误。 –

Kermit说什么，箭头功能指向父母，所以它选择'游戏板'。把'this'改成'cardElement' –

您不应该使用箭头功能，因为在箭头功能中，this指向的是父范围。因此this是undefined。使用箭头功能时应谨慎。

来源

2017-04-25 00:24:36 Kermit

谢谢。我会阅读箭头功能以获得更好的理解 –

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

回答

相关问题