Uncaught TypeError: Cannot read property 'rank' of undefined

Question

I just started learning javascipt and am stumped at this error in the middle of a tutorial:

I'm trying to create a mini-game of sorts where I flip cards and find matches.

I have objects in an array and am trying to call the particular value of 'rank' depending on which card(object) is chosen.

Running the code in console gives me an error: Uncaught TypeError: Cannot read property 'rank' of undefined.

Javascript:

console.log("Up and running");

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() {
    if (cardsInPlay[0] === cardsInPlay[1]) {
        alert("You found a match!");
    } else alert("Sorry, try again");
}
var flipCard = function(cardId) {
    console.log("User flipped " + cards[cardId].rank); 
    /*issue is with calling the rank*/
    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);
    cardsInPlay.push(cards[cardId].rank);
    if (cardsInPlay.length === 2) {
        checkForMatch();
    };
}

var createBoard = function() {
    for (var i = 0; i < cards.length; i ++) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute("img", "images/back.png");
        cardElement.setAttribute("data-id", i);
        cardElement.addEventListener("click", flipCard());
        document.getElementById("game-board").appendChild(cardElement);
    }
}
createBoard();

flipCard(0);
flipCard(2);

Is my error due to the way I call the value from the object using cards[cardId].rank?

flipcard function needs an cardId parameter, when you call `flipcard` on click event you don't pass any parameter, and it becomes undefined. — Gntem, Apr 20 '17 at 09:27

Jevgeni · Answer 1 · 2017-04-20T09:42:53.707

0

Try changing

cardElement.addEventListener("click", flipCard());

to

cardElement.addEventListener("click", function(){ flipCard(i); });

UPDATE start

to

cardElement.addEventListener("click", flipCard.bind(null, i));

to avoid closuring case mentioned in comments

UPDATE end

Explanation: when calling addEventListener, second argument must be a function, but you pass result of the call of the function flipCard, which returns undefined.

Another mistake in your code, is that you call it without arguments, while it expects cardId as argument, and when it does not get it, it takes undefined element from the cards array

edited Apr 20 '17 at 09:42

answered Apr 20 '17 at 09:25

Jevgeni

2,556
1
15
18

Don't forget this: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example! – ibrahim mahrir Apr 20 '17 at 09:39

score 0 · Accepted Answer · edited May 23 '17 at 12:09

You have to pass a function reference to addEventListener (a function that call flipCard with a correct parameter). Then you'll have this problem which you can be solved like this:

var createBoard = function() {
    for (var i = 0; i < cards.length; i ++) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute("img", "images/back.png");
        cardElement.setAttribute("data-id", i);

        // ############################################# 

        (function(index) {
            cardElement.addEventListener("click", function() {
                flipCard(index);
            });
        })(i);

        // ############################################# 

        document.getElementById("game-board").appendChild(cardElement);
    }
}

or using forEach instead of for which make things a lot simpler:

var createBoard = function() {
    cards.forEach(function(card, i) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute("img", "images/back.png");
        cardElement.setAttribute("data-id", i);

        // no need to wrap this in an immediately invoked function expression (as this whole code is wrapped in the callback of forEach)
        cardElement.addEventListener("click", function() {
            flipCard(i);
        });

        document.getElementById("game-board").appendChild(cardElement);
    }
}

score 0 · Answer 3 · answered Apr 20 '17 at 10:29

0

Just update

cardElement.addEventListener("click", flipCard());

To

cardElement.addEventListener("click", function(e){ flipCard(e.target.dataset.id); });

answered Apr 20 '17 at 10:29

Pravin Pareek

19
1
2

Uncaught TypeError: Cannot read property 'rank' of undefined

3 Answers3