Unable to flip more than one elements

Question

This is what I am doing:

I am developing a memory game, in which the user has to match deck contents. Whenever a user clicks on a deck content, it is flipped revealing the icon the card is holding. There will be two cards with the same icon that the user has to match.

I am unable to click on more than one element (I am only able to flip one element).

Below is my code:

 $(document).ready(function() { $(".deck-content").flip({ trigger: 'manual' }); var i = 1; var clickCount = 1; var cardVal1 = ''; var cardVal2 = ''; $(".flip").click(function() { if (i <=2) { //i should be max 2 because the match is to be done to two elements if (i === 1) { //check if its the first flip $(this).closest(".deck-content").flip(true); cardVal1 = $(this).val(); i++; clickCount++; } else if ((clickCount === 2) && ($(this).val() !== cardVal1)) { //checks if its the second flip and the second flip is not the first element again. $(this).closest(".deck-content").flip(true); cardVal2 = $(this).val(); clickCount++; } if (cardVal1 === cardVal2) { //checks if both the flips match $(this).prev().remove(); } } }); $(".unflip").click(function() { //used to unflip $(this).closest(".deck-content").flip(false); }); }); 

 @media only screen and (max-width: 1370px){ body{ background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg"); } .container{ width: 1370px; margin-left: auto; margin-right: auto; text-align: center; margin-top: 20px; } ul{ list-style-type: none; margin: 0 auto; text-align: center; } .heading-wrap{ padding: 20px 10px 20px 10px; background-color: rgba(0,0,10,0.4); } h1{ text-align: center; } .heading-style{ color: rgb(140,100,80); } li{ columns: 4; vertical-align: top; } .stars{ text-align: center; font-size: 30px; } section.playground{ margin-left: 28%; margin-right: 28%; text-align: center; } .fa-prop-cover{ font-size:70px; text-align: center; display: inline-block; margin-top: 20px; margin-right: 20px; } .deck-content{ text-align: center; width: 120px; height: 120px; border: 1px solid; box-sizing: border-box; vertical-align: middle; display: inline; margin: 20px 20px 20px 20px; cursor: pointer; color: rgb(150,150,150); } } @media only screen and (min-width: 1371px) and (max-width: 1600){ body{ background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg"); } .container{ width: 1500px; margin-left: auto; margin-right: auto; text-align: center; margin-top: 20px; } ul{ list-style-type: none; margin: 0 auto; text-align: center; } .heading-wrap{ padding: 20px 10px 20px 10px; background-color: rgba(0,0,10,0.4); } h1{ text-align: center; } .heading-style{ color: rgb(140,100,80); } li{ columns: 4; vertical-align: top; } .stars{ text-align: center; font-size: 30px; } section.playground{ margin-left: 28%; margin-right: 28%; text-align: center; } .fa-prop-cover{ font-size:70px; text-align: center; display: inline-block; vertical-align: middle; margin-top: 20px; margin-right: 30px; } .fa-prop{ font-size:70px; text-align: center; display: inline-block; vertical-align: middle; margin-top: 20px; } .deck-content{ text-align: center; width: 120px; height: 120px; border: 1px solid; box-sizing: border-box; vertical-align: middle; display: inline; margin: 20px 20px 20px 20px; cursor: pointer; color: rgb(150,150,150); } } @media only screen and (min-width: 1601px) and (max-width: 1920px){ body{ background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg"); } .container{ width: 1800px; margin-left: auto; margin-right: auto; text-align: center; margin-top: 20px; } ul{ list-style-type: none; margin: 0 auto; text-align: center; } .heading-wrap{ padding: 20px 10px 20px 10px; background-color: rgba(0,0,10,0.4); } h1{ text-align: center; } .heading-style{ color: rgb(140,100,80); } li{ columns: 4; vertical-align: top; } .stars{ text-align: center; font-size: 30px; } section.playground{ margin-left: 28%; margin-right: 28%; text-align: center; } .fa-prop-cover{ font-size:70px; text-align: center; display: inline-block; vertical-align: middle; margin-top: 20px; margin-right: 30px; } .fa-prop{ font-size:70px; text-align: center; display: inline-block; vertical-align: middle; margin-top: 20px; } .deck-content{ text-align: center; width: 120px; height: 120px; border: 1px solid; box-sizing: border-box; vertical-align: middle; display: inline; margin: 20px 20px 20px 20px; cursor: pointer; color: rgb(150,150,150); } } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Memory Game!</title> <meta name="description" content="Memory Game"> <meta name="author" content="Gaurav Thantry"> <meta name="keywords" content="html,css,javascript"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/app.css"> <script src="js/app.js"></script> </head> <body> <section class="container"> <header class="heading"> <h1 class="heading-style"><span class="heading-wrap">The Memory Game!</span></h1> </header> <br/> <section class="scorecard"> <section class="stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </section> </section> <section class="playground"> <section class="row"> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip" ></i> </section> <section class="back"> <i class="fa fa-anchor fa-prop unflip" value="anchor"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-assistive-listening-systems fa-prop unflip" value="assist"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-bicycle fa-prop unflip" value="bicycle"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-american-sign-language-interpreting fa-prop unflip" value="sign"></i> </section> </section> </section> <section class="row"> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-bitcoin fa-prop unflip" value="bitcoin"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-angellist fa-prop unflip" value="angellist"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-bug fa-prop unflip" value="bug"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-cubes fa-prop unflip" value="cubes"></i> </section> </section> </section> <section class="row"> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-anchor fa-prop unflip" value="anchor"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-assistive-listening-systems fa-prop unflip" value="assist"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-bicycle fa-prop unflip" value="bicycle"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-american-sign-language-interpreting fa-prop unflip" value="sign"></i> </section> </section> </section> <section class="row"> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-bitcoin fa-prop unflip" value="bitcoin"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-angellist fa-prop unflip" value="angellist"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-bug fa-prop unflip" value="bug"></i> </section> </section> <section class="col-xs-3 deck-content"> <section class="front"> <i class="fa fa-bandcamp fa-prop-cover flip"></i> </section> <section class="back"> <i class="fa fa-cubes fa-prop unflip" value="cubes"></i> </section> </section> </section> </section> </section> </body> </html> 

Answer 1

You can try this:

    $(document).ready(function() {
    $(".deck-content").flip({
        trigger: 'manual'
    });
    var i = 1;
    var clickCount = 1;
    var cardVal1 = '';
    var cardVal2 = '';

    $(".flip").click(function() {
        if (i <=2) { //i should be max 2 because the match is to be done to two elements
            if (i === 1) {      //check if its the first flip
                $(this).closest(".deck-content").flip(true);
                cardVal1 = $(this).val();
                i++;
                clickCount++;
            } else if ((i === 2) ) {  //checks if its the second flip and the second flip is not the first element again.
                $(this).closest(".deck-content").flip(true);
                cardVal2 = $(this).val();
                clickCount++;
                i++;
            }

            if (cardVal1 === cardVal2) {  //checks if both the flips match
                $(this).prev().remove();
            }
        }
    });

    $(".unflip").click(function() {  //used to unflip
        $(this).closest(".deck-content").flip(false);
        i--;
    });
});

You need to change i value if you make unflip too. And in your condition:

} else if ((clickCount === 2) && ($(this).val() !== cardVal1))

I think that you don't need to check if is value same as first click because you have setup for second click make unflip event.

Answer 2

Your current code has a bit more problems than just only being able to flip one. For maximum usability, a memory game would rather let you draw 2 cards, and then revert them automatically, and not wait for another card to be clicked on the manually unflip them, that would be well, to easy to cheat ;)

Personally, I wouldn't really work with a fixed HTML to create such a deck. An alternative solution how to do it, would be the following way

 const cards = ['ༀ', 'མ', 'ྦྷ', 'ཡ', 'ᎃ']; // based on the cards, will return a promise that contains 2 versions of each card async function createMemoryDeck( cards ) { return cards.concat( cards ); } // will shuffle the deck and return a promise with a shuffled deck async function shuffleDeck( deck ) { let copy = deck.slice(); let shuffled = []; while (copy.length !== 0) { let i = parseInt(Math.random() * copy.length); shuffled.push( copy.splice(i, 1)[0] ); } return shuffled; } // resets the card to non flipped (argument based) function resetCards() { for (let i = 0; i < arguments.length; i++) { arguments[i].classList.remove('flipped'); arguments[i].innerHTML = '&nbsp;'; } } // checks if the user won the game, if he has, adds a button to restart the game function validateWin() { if (document.querySelectorAll('.deck-item').length === document.querySelectorAll('.solved').length) { // the player guessed all cards let container = document.querySelector('#container'); clearContainer( container ); let button = document.createElement('button'); button.type = 'button'; button.innerHTML = 'Won, click to start a new game'; button.addEventListener('click', () => startNew( cards ) ); container.appendChild( button ); } } // validates if there are 2 cards flipped, if yes, checks if the cards are the same // if not, flips the cards back after 1 second function validateCards() { var l = document.querySelectorAll('.flipped'); if (l.length !== 2) { return; } // 2 matching items if (l[0].innerHTML === l[1].innerHTML) { l[0].classList.add('solved'); l[1].classList.add('solved'); } setTimeout( () => { resetCards( ...l ); validateWin(); }, 1000 ); } // if 2 cards are already flipped, it will reset them function ensureFlipped() { var l = document.querySelectorAll('.flipped'); if (l.length === 2) { resetCards( ...l ); } } // creates a closure with the card, and returns an event handler function handleClick( card ) { return (e) => { let target = e.target; if (target.classList.contains('solved')) { return; } if (target.classList.contains('flipped')) { // when flipped, shouldn't allow to flip it back return; } ensureFlipped(); target.innerHTML = card; target.classList.add('flipped'); validateCards(); } } // clears a given container function clearContainer( container ) { for (let i = container.childNodes.length; --i; ) { container.removeChild( container.childNodes[i] ); } } // creates the html element for the decks async function createDeck( deck ) { const target = document.querySelector('#container'); clearContainer( target ); for (let card of deck) { let span = document.createElement('span'); span.className = 'deck-item'; span.addEventListener( 'click', handleClick( card ) ); target.appendChild( span ); } } // starts a new game function startNew( cards ) { createMemoryDeck( cards ).then( shuffleDeck ).then( createDeck ); } // initialize the game startNew( cards ); 

 #container { position: absolute; width: 80%; margin-left: 10%; } .deck-item { background-color: silver; border: solid #333 1px; border-radius: 5px; font-size: 4em; text-align: center; vertical-align: middle; width: 100px; height: 100px; display: inline-block; margin: 3px; } .deck-item.flipped, .deck-item.solved { background-color: white; } .solved { color: darkgreen; border: solid transparent 1px; } 

 <div id="container"> </div>