issue with returning a value from a function

[maureenv]

I am trying to return the value of the letter on the card that I click on in my memory game. Here is the code snippet that I am referring to:

cardsBack.addEventListener("click",function(){
    this.classList.toggle("cardsFront");
    game(this.getAttribute("data-deck-position"));
  })

} // close for loop
var cardLetter;

var game=function(x){
  var value=document.getElementsByClassName("cardsBack");
  cardLetter = value[x].textContent; // this returns only the text on the card
  return cardLetter;
}

console.log(cardLetter);

Every time I console.log(cardLetter), it tells me "undefined" in the console. I'm not sure why it is undefined because I declared the card letter variable outside of the function. If I declare the cardLetter variable inside the game function and then console.log it inside the function, it will tell me the letter of the card I click on. However, I want to use the letter on the card in another function. Is there a way to do this?

My repo link is http://maureenv.github.io/project1/ I'm referring to lines 54 to 62.

Thank you

[amaseda]

Have you triggered the event listener prior to running console.log(cardLetter)? If not, that statement is going to return undefined because game() has not been run yet.