Как сделать так, чтобы изображения появлялись и менялись с помощью «клика»?

Question

https://github.com/baolmovement/wdi-fundamentals-memorygame

Выше представлен репозиторий для моего проекта. Я пытаюсь A) заставить изображения карты появляться B) иметь изображения карты, щелкающие к изображению лица.

Что я делаю не так?

var flipCard = function(){ 

var cardId = this.getAttribute('data-id');

var cardOne = cards[0];
cardsInPlay.push(cards[0].rank);
console.log("User flipped " + cards[0].rank);  
console.log(cards[0].cardImage);



var cardTwo = cards[2];
cardsInPlay.push(cards[2].rank);
console.log("User flipped " + cards[2].rank); 
console.log(cards[2].cardImage);

console.log (this.cardImage).setAttribute('src', this);

if (cardsInPlay.length === 2){alert("Sorry, try again!")} 
    else if (cardsInPlay[0] === cardsInPlay[1]) {alert("You found a match!");}   

checkForMatch;

};   

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

createdBoard();