獲取錯誤'無法讀取屬性'未定義的屬性'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'

回答

相關問題