は、私はJavaScriptに新たなんだと私は

Question

I keep getting this error and I'm not sure what to do? I'm trying to make a flip card game. Uncaught TypeError: Cannot read property 'getAttribute' of undefined at flipCard (main.js:42) at createBoard (main.js:53) at main.js:59

var cards = [ 
    { 
    rank: 'queen', 
    suit: 'diamonds', 
    cardImage: 'images/queen-of-diamonds.png' 
    }, 
    { 
    rank: 'queen', 
    suit: 'hearts', 
    cardImage: 'images/queen-of-hearts.png' 
    }, 
    { 
    rank: 'king', 
    suit: 'diamonds', 
    cardImage: 'images/king-of-diamonds.png' 
    }, 
    { 
    rank: 'king', 
    suit: 'hearts', 
    cardImage: 'images/king-of-hearts.png' 
    } 
    ] 
    var cardsInPlay = [cards] 
    var checkForMatch = function() { 
    this.cardImage.setAttribute(src) 
    if (cardsInPlay[0] === cardsInPlay[1]) { 
    window.alert('You found a match!') 
    } else { 
    window.alert('Sorry, try again') 
    } 
    } 

var flipCard = function (cardId) { 
this.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()) 
cardElement.appendChild(game-board) 
} 
} 
createBoard() 
cardsInPlay.push(cards[cardId])` 

Answer 1

ここで間違っていた私はどこを把握しようとしている：あなたはflipCardを起動している

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

ではなく、関数参照を渡します。 は、それがグローバル空間で定義されている通り、checkForMatchでthis価値があるように行っていないに応じて

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) 
    } 
} 

Answer 2

コードを変更しようと、あなたはそれを直接呼んでいます。 call：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

checkForMatch.call(this); 

を使用して呼び出すことをお勧めします