Clicking card in memory game doesn't flip it over

Question

I'm trying to make a memory game and am struggling to get the cards to flip over when they're clicked. I expected the following for loop to call the function displayCard when a card (corresponding to each li item with class card ) is clicked, which function toggles the classes show and open (sets the card to visible [displays icon] and changes the background color). Any suggestions?

CodePen

For loop:

for (let i = 0; i < cards.length; i++) {
  card = cards[i];
  card.addEventListener('click', displayCard);
  card.addEventListener('click', cardOpen);
  card.addEventListener('click', congratulations);
}

displayCard function:

let displayCard = function() {
  this.classList.toggle('open');
  this.classList.toggle('show');
  this.classList.toggle('disabled');
};

CSS for classes show and open :

.card-deck .card.open {
    /* transform: rotateY(0); */
    background: #02b3e4;
    cursor: default;
    animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-duration: .75s;
}

.card-deck .card.show {
    font-size: 33px;
}

.show {
    visibility: visible !important;
    opacity: 100 !important;
}

Answer 1

There are two errors in your code that need to be fixed and then the flipping occurs :

• in the startGame function, deck.appendChild is not a function. deck was initialized with document.getElementsByClassName('card-deck'). And document.getElementsByClassName returns an array. You need to select the first index of this array.
• in the startGame function, interval is not defined. Your function is called before the interval variable is declared. Either move up the interval variable declaration of declare it with the var keyword to "reserve" the identifier.

 let card = document.getElementsByClassName('card'); // Spread operator (new in ES6) allows iterable to expand where 0+ arguments are expected let cards = [...card]; let deck = document.getElementsByClassName('card-deck')[0]; let moves = 0; let counter = document.querySelector('.moves'); let stars = document.querySelectorAll('.fa-star'); let matchingCard = document.getElementsByClassName('matching'); let starsList = document.querySelectorAll('.stars li'); let closeIcon = document.querySelector('.close'); let modal = document.getElementsByClassName('main-modal'); let openedCards = []; // Game timer let second = 0, minute = 0, hour = 0; let timer = document.querySelector('.timer'); let interval; // Shuffle function from http://stackoverflow.com/a/2450976 function shuffle(array) { let currentIndex = array.length, temporaryValue, randomIndex; while (currentIndex !== 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } // Shuffles cards upon page load document.body.onload = startGame(); function startGame() { // Shuffles deck cards = shuffle(cards); // Removes any existing classes from each card for (let i = 0; i < cards.length; i++) { deck.innerHTML = ''; [].forEach.call(cards, function(item) { deck.appendChild(item); }); cards[i].classList.remove('show', 'open', 'matching', 'disabled'); } // Resets number of moves moves = 0; counter.innerHTML = moves; // Resets star rating for (let i = 0; i < stars.length; i++) { stars[i].style.color = '#ffd700'; stars[i].style.visibility = 'visible'; } // Resets timer let second = 0; let minute = 0; let hour = 0; let timer = document.querySelector('.timer'); timer.innerHTML = '0 mins 0 secs'; if (typeof interval != "undefined") { sclearInterval(interval); } } // Toggles open and show classes to display cards let displayCard = function() { this.classList.toggle('open'); this.classList.toggle('show'); this.classList.toggle('disabled'); }; // Adds opened cards to openedCards list and checks if cards are a match or not function cardOpen() { openedCards.push(this); let len = openedCards.length; if (len === 2) { moveCounter(); if (openedCards[0].type === openedCards[1].type) { matching(); } else { notMatching(); } } } // When cards match function matching() { openedCards[0].classList.add('matching', 'disabled'); openedCards[1].classList.add('matching', 'disabled'); openedCards[0].classList.remove('show', 'open'); openedCards[1].classList.remove('show', 'open'); openedCards = []; } // When cards don't match function notMatching() { openedCards[0].classList.add('not-matching'); openedCards[1].classList.add('not-matching'); disable(); setTimeout(function() { openedCards[0].classList.remove('show', 'open', 'not-matching'); openedCards[1].classList.remove('show', 'open', 'not-matching'); enable(); openedCards = []; }, 1100); } // Disables cards temporarily function disable() { Array.prototype.filter.call(cards, function(card) { card.classList.add('disabled'); }); } // Enables cards, disables matching cards function enable() { Array.prototype.filter.call(cards, function(card) { card.classList.remove('disabled'); for (let i = 0; i < matchingCard.length; i++) { matchingCard[i].classList.add('disabled'); } }); } // Counts player's moves function moveCounter() { moves++; counter.innerHTML = moves; // Starts timer on first click if (moves == 1) { second = 0; minute = 0; hour = 0; startTimer(); } // Sets star rating based on number of moves if (moves > 8 && moves < 12) { for (i = 0; i < 3; i++) { if (i > 1) { stars[i].style.visibility = 'collapse'; } } } else if (moves > 13) { for (i = 0; i < 3; i++) { if (i > 0) { stars[i].style.visibility = 'collapse'; } } } } function startTimer() { interval = setInterval(function() { timer.innerHTML = minute + 'mins ' + second + 'secs'; second++; if (second == 60) { minute++; second = 0; } if (minute == 60) { hour++; minute = 0; } }, 1000); } // Congratulates player when all cards match and shows modal, moves, time and rating function congratulations() { if (matchingCard.length == 16) { clearInterval(interval); let finalTime = timer.innerHTML; // Shows congratulations modal modal.classList.add('show'); let starRating = document.querySelector('.stars').innerHTML; // Shows move, time, and rating on modal document.getElementsByClassName('final-move').innerHTML = moves; document.getElementsByClassName('star-rating').innerHTML = starRating; document.getElementsByClassName('total-time').innerHTML = finalTime; closeModal(); } } // Closes modal upon clicking its close icon function closeModal() { closeIcon.addEventListener('click', function(e) { modal.classList.remove('show'); startGame(); }); } function reset() { modal.classList.remove('show'); startGame(); } // Adds event listeners to each card for (let i = 0; i < cards.length; i++) { card = cards[i]; card.addEventListener('click', displayCard); card.addEventListener('click', cardOpen); card.addEventListener('click', congratulations); } 

 html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { background: #ffffff; font-family: 'Permanent Marker', cursive; font-size: 16px; } .container { display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { font-family: 'Gloria Hallelujah', cursive; } /* DECK OF CARDS */ .card-deck { width: 85%; background: #716F71; padding: 1rem; border-radius: 4px; box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5); display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; margin: 0 0 3em; } .card-deck .card { height: 3.7rem; width: 3.7rem; margin: 0.2rem 0.2rem; background: #141214;; font-size: 0; color: #ffffff; border-radius: 5px; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5); } .card-deck .card.open { /* transform: rotateY(0); */ background: #02b3e4; cursor: default; animation-name: flipInY; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: .75s; } .card-deck .card.show { font-size: 33px; } .show { visibility: visible !important; opacity: 100 !important; } .card-deck .card.matching { cursor: default; background: #E5F720; font-size: 33px; animation-name: rubberBand; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: .75s; } .card-deck .card.not-matching { animation-name: pulse; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-duration: .75s; background: #e2043b; } .card-deck .card.disabled { pointer-events: none; opacity: 0.9; } /* SCORE PANEL */ .score-panel { text-align: left; margin-bottom: 10px; } .score-panel .stars { margin: 0; padding: 0; display: inline-block; margin: 0 5px 0 0; } .score-panel .stars li { list-style: none; display: inline-block; } .score-panel .restart { float: right; cursor: pointer; } .fa-star { color: #FFD700; } .timer { display: inline-block; margin: 0 1rem; } /* CONGRATULATIONS MODAL */ .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #ffffff; border-radius: 5px; width: 85%; position: relative; transition: all 5s ease-in-out; font-family: 'Gloria Hallelujah', cursive; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #e5f720; } .popup .congrats-message, .info-message { max-height: 30%; overflow: auto; text-align: center; } .star-rating li { display: inline-block; } .play-again { background-color: #141214; padding: 0.7rem 1rem; font-size: 1.1rem; display: block; margin: 0 auto; width: 50%; font-family: 'Gloria Hallelujah', cursive; color: #ffffff; border-radius: 5px; } /* Animations */ @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } } @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.2, 1.2, 1.2); } to { transform: scale3d(1, 1, 1); } } /* MEDIA QUERIES */ @media (max-width: 320px) { .card-deck { width: 85%; } .card-deck .card { height: 4.7rem; width: 4.7rem; } } /* For tablets and larger screens */ @media (min-width: 768px) { .container { font-size: 22px; } .card-deck { width: 660px; height: 680px; } .card-deck .card { height: 125px; width: 125px; } .popup { width: 60%; } } 

 <!-- <!doctype html> --> <html lang="en"> <head> <meta charset="utf-8"> <title>Matching Game</title> <meta name="description" content=""> <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda"> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <header> <h1>Matching Game</h1> </header> <section class="score-panel"> <ul class="stars"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> </ul> <span class="moves">0</span> moves <div class="timer"></div> <div class="restart" onclick=startGame()> <i class="fa fa-repeat"></i> </div> </section> <ul class="card-deck"> <li class="card" type="diamond"> <i class="fa fa-diamond"></i> </li> <li class="card" type="plane"> <i class="fa fa-paper-plane-o"></i> </li> <li class="card matching" type="anchor"> <i class="fa fa-anchor"></i> </li> <li class="card" type="bolt" > <i class="fa fa-bolt"></i> </li> <li class="card" type="cube"> <i class="fa fa-cube"></i> </li> <li class="card matching" type="anchor"> <i class="fa fa-anchor"></i> </li> <li class="card" type="leaf"> <i class="fa fa-leaf"></i> </li> <li class="card" type="bicycle"> <i class="fa fa-bicycle"></i> </li> <li class="card" type="diamond"> <i class="fa fa-diamond"></i> </li> <li class="card" type="bomb"> <i class="fa fa-bomb"></i> </li> <li class="card" type="leaf"> <i class="fa fa-leaf"></i> </li> <li class="card" type="bomb"> <i class="fa fa-bomb"></i> </li> <li class="card open show" type="bolt"> <i class="fa fa-bolt"></i> </li> <li class="card" type="bicycle"> <i class="fa fa-bicycle"></i> </li> <li class="card" type="plane"> <i class="fa fa-paper-plane-o"></i> </li> <li class="card" type="cube"> <i class="fa fa-cube"></i> </li> </ul> <div class="main-modal overlay"> <div class="popup"> <h2>Congratulations!</h2> <a class="close" href=# >×</a> <div class="congrats-message"> Congratulations, you're a winner! </div> <div class="info-message"> <p>You made <span class=final-move></span> moves </p> <p>In <span class=total-time></span></p> <p>Rating: <span class=star-rating></span></p> </div> <button class="play-again" onclick="reset()"> Play again </button> </div> </div> </div> <script src="index.js"></script> </body> </html>