jQuery and a basic memory game, why does it only kinda work?

Question

So I'm making a basic memory game, where I'm only trying to make two of the same ID images disappear whenever they are both clicked. However, the code below does work. Kind of.. But not entirely and I don't understand why. The problem is that sometimes only one image is hidden when both get clicked. Sometimes they all get hidden and it's an empty gameboard, other times 1, 2 or 3 single images gets left on the gameboard - what is causing this? Grateful for answers!

$(document).ready(function() {
  var firstClicked;
  $(".pictures").click(function() {
    if (this.id == firstClicked) {
      alert(firstClicked + " " + this.id); /*Just to see if both images get clicked*/
      $(this).hide();
      $("#" + firstClicked).hide();
      firstClicked = null;
    } else {
      firstClicked = this.id;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <h1>Play game!</h1>
  <div id="gameboard">
    <div class="pic-row1">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" id="programming">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" id="confusedoldman">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" id="santabeatdown">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" id="sparkles">
    </div>
    <div class="pic-row2">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" id="santabeatdown">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" id="pizzalover">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" id="fishbowling">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" id="monkeys">
    </div>
    <div class="pic-row3">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" id="fishbowling">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" id="confusedoldman">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" id="sparkles">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" id="redpanda">
    </div>
    <div class="pic-row4">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" id="programming">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" id="redpanda">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" id="monkeys">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" id="pizzalover">
    </div>
  </div>
</body>

I'm afraid "debug this code" type questions don't tend to work well on Stack Overflow. What one would usually do in such a situation is just that - debug. Walk through each step of the program and watch the variables (and DOM elements) change. http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code — Pekka, Feb 07 '17 at 09:32

Carsten Løvbo Andersen · Answer 1 · 2017-02-07T10:48:25.720

First of all, Id should be a unique value. If you want the same value on multiple object, you should use something like class or attribute.

I changed your example to use a attribute named cardid.

I also cleaned the code a bit and ran it multiple times. I cant reproduce any of your errors.

Hope this solved your problem

$(document).ready(function() {
  var firstClicked;
  $(".pictures").click(function() {
    if (firstClicked == null) 
    {
      firstClicked = $(this).data("cardid");
      $(this).addClass("selectedCard");
    } 
    else {
      if ($(this).data("cardid") == firstClicked && $(this).hasClass("selectedCard") == false)
      {
        $(this).remove();
        $("#gameboard").find("[data-cardid='" + firstClicked + "']").remove();
      }
       firstClicked = null;
      $(".selectedCard").removeClass("selectedCard");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>Play game!</h1>
  <div id="gameboard">
    <div class="pic-row1">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" data-cardid="programming">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" data-cardid="confusedoldman">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" data-cardid="santabeatdown">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" data-cardid="sparkles">
    </div>
    <div class="pic-row2">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" data-cardid="santabeatdown">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" data-cardid="pizzalover">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" data-cardid="fishbowling">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" data-cardid="monkeys">
    </div>
    <div class="pic-row3">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" data-cardid="fishbowling">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" data-cardid="confusedoldman">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" data-cardid="sparkles">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" data-cardid="redpanda">
    </div>
    <div class="pic-row4">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" data-cardid="programming">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" data-cardid="redpanda">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" data-cardid="monkeys">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" data-cardid="pizzalover">
    </div>
  </div>
</body>

This answers the question but has flaws. For example, run your snippet and click the same image twice. You'd need to check that the current img has the same attribute but is not actually the same element as the first somehow — Wesley Smith, Feb 07 '17 at 10:14
Hmm, something's a bit hinky. Click "Fish jumping", "Monkeys", the other "Fish jumping", then the first "Fish jumping", the match is not detected — Wesley Smith, Feb 07 '17 at 10:43
Thanks for the note, I fixed it so it should be working well now — Carsten Løvbo Andersen, Feb 07 '17 at 10:48

Wesley Smith · Accepted Answer · 2017-02-07T10:49:21.720

ID's must be unique, you cant have multiple elements with the same ids like that. This is a good place to use data attributes and data()

Here is how I would do this:

Working jsFiddle

$(document).ready(function() { 

  $(".pictures").click(function() {
    var $this = $(this).addClass('selected'); // add selected class and get the clicked element
    var $lastSelected = $('.selected').not($this); 
    if($lastSelected.length > 0){
        var thisId = $this.data('select-id');
        var lastId = $lastSelected.data('select-id');
        console.log(thisId , lastId);
        if(thisId == lastId){
         $('[data-select-id="' + thisId + '"]').hide();
        }
        $('.selected').removeClass('selected');
    }
  });
});

.pictures {
  width: 180px;
  height: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Play game!</h1>
<div data-select-id="gameboard">
  <div class="pic-row1">
    <img src="programming.jpeg" alt="jQuery code" class="pictures" data-select-id="programming">
    <img src="confusedoldman.jpeg" alt="Confused old man" class="pictures" data-select-id="confusedoldman">
    <img src="santabeatdown.jpeg" alt="Santa ready to rumble" class="pictures" data-select-id="santabeatdown">
    <img src="sparkles.jpeg" alt="Sparkling lights" class="pictures" data-select-id="sparkles">
  </div>
  <div class="pic-row2">
    <img src="santabeatdown.jpeg" alt="Santa ready to rumble santabeatdown" class="pictures">
    <img src="pizzalover.jpg" alt="Loving the pizza" class="pictures" data-select-id="pizzalover">
    <img src="fishbowling.jpg" alt="Fish jumping" class="pictures" data-select-id="fishbowling">
    <img src="monkeys.jpeg" alt="Monkeys" class="pictures" data-select-id="monkeys">
  </div>
  <div class="pic-row3">
    <img src="fishbowling.jpg" alt="Fish jumping" class="pictures" data-select-id="fishbowling">
    <img src="confusedoldman.jpeg" alt="Confused old man" class="pictures" data-select-id="confusedoldman">
    <img src="sparkles.jpeg" alt="Sparkling lights" class="pictures" data-select-id="sparkles">
    <img src="redpanda.jpeg" alt="A red panda" class="pictures" data-select-id="redpanda">
  </div>
  <div class="pic-row4">
    <img src="programming.jpeg" alt="jQuery code" class="pictures" data-select-id="programming">
    <img src="redpanda.jpeg" alt="A red panda" class="pictures" data-select-id="redpanda">
    <img src="monkeys.jpeg" alt="Monkeys" class="pictures" data-select-id="monkeys">
    <img src="pizzalover.jpg" alt="Loving the pizza" class="pictures" data-select-id="pizzalover">
  </div>
</div>

This did it, yes! I am aware ID's need to be unique, but I guess I left it in this way because I had been doing this for so long I just went "programming-blind". I didn't even think in terms of using the addclass() method, to be honest I didn't really know it existed, but it is perfect for this game's purpose. Thank you! Edit: Also, using removeClass(), can one return the removed elements or are they gone forever? This design isn't in need of any function like that but I'm just curious. — honke, Feb 07 '17 at 15:06
@honke Indeed you can capture the modified elements after `.removeClass()` by simply "caching" the return value (assigning the return value to a variable) see https://jsfiddle.net/vgLcndpf/13/ as an example — Wesley Smith, Feb 07 '17 at 22:09

score 0 · Answer 3 · answered Feb 07 '17 at 10:17

First i have changed all your id="" to data-id="" because you can't have multiple element with same id. See this jsFiddle

var firstClicked = [];
var indices = [];
$(document).ready(function() {
  $(".pictures").click(function() {
    var id = $(this).data('id');
    var index = $(this).index();
    if ((indices.indexOf(index) == -1) && (firstClicked.indexOf(id) !== -1)) {
      $('*[data-id="' + id + '"]').hide();
      firstClicked = [];
      indices = [];
    } else {
      firstClicked.push(id);
      indices.push(index);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>Play game!</h1>
  <div id="gameboard">
    <div class="pic-row1">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" data-id="programming">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" data-id="confusedoldman">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" data-id="santabeatdown">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" data-id="sparkles">
    </div>
    <div class="pic-row2">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" data-id="santabeatdown">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" data-id="pizzalover">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" data-id="fishbowling">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" data-id="monkeys">
    </div>
    <div class="pic-row3">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" data-id="fishbowling">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" data-id="confusedoldman">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" data-id="sparkles">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" data-id="redpanda">
    </div>
    <div class="pic-row4">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" data-id="programming">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" data-id="redpanda">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" data-id="monkeys">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" data-id="pizzalover">
    </div>
  </div>
</body>

Shiva K Thogiti · Answer 4 · 2017-02-07T11:37:20.410

There are two things I observed. 1. Using same Id for multiple dom elements is not valid. This could be the issue. 2. Since you want to bind click event for each of the elements with "pictures" class [$(".pictures").click(...], using '.each' is advisable.

var firstClicked = null;
        var secondClicked = null;

        var firstMaskDiv = null;
        var secondMaskDiv = null;

        function clickVal(keyVal, maskControl) {
            $(maskControl).removeClass("maskedCard");

            if (firstClicked == null) {
                firstClicked = keyVal;
                firstMaskDiv = maskControl;
                return;
            }
            else {
                secondClicked = keyVal;
                secondMaskDiv = maskControl;
            }

            if (firstClicked == secondClicked) {
                //                $("[data-imagecode=" + firstClicked + "]").hide();
                $(firstMaskDiv).hide();
                $(secondMaskDiv).hide();
            }
            else {
                alert("Try Again");
                $(firstMaskDiv).addClass("maskedCard");
                $(secondMaskDiv).addClass("maskedCard");
            }

            firstClicked = null;
            secondClicked = null;
        }

.maskedCard
        {
            cursor: pointer;
            background-color: Orange;
            border: 5px solid gray;
            z-index: 99;
            position: absolute;
            width: 180px;
            height: 180px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>
        Play game!</h1>
    <div id="gameboard">
        <table>
            <tr>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('1', this);">
                    </div>
                    <img src="img/programming.jpg" alt="jQuery code" style="width: 180px; height: 180px;"
                        class="pictures" id="programming" data-imagecode="1" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('2', this);">
                    </div>
                    <img src="img/confusedoldman.jpg" alt="Confused old man" style="width: 180px; height: 180px;"
                        class="pictures" id="confusedoldman" data-imagecode="2" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('3', this);">
                    </div>
                    <img src="img/santabeatdown.jpg" alt="Santa ready to rumble" style="width: 180px;
                        height: 180px;" class="pictures" id="santabeatdown" data-imagecode="3" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('4', this);">
                    </div>
                    <img src="img/sparkles.jpg" alt="Sparkling lights" style="width: 180px; height: 180px;"
                        class="pictures" id="sparkles" data-imagecode="4" />
                </td>
            </tr>
            <tr>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('3', this);">
                    </div>
                    <img src="img/santabeatdown.jpg" alt="Santa ready to rumble" style="width: 180px;
                        height: 180px;" class="pictures" id="santabeatdown1" data-imagecode="3" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('5', this);">
                    </div>
                    <img src="img/pizzalover.jpg" alt="Loving the pizza" style="width: 180px; height: 180px;"
                        class="pictures" id="pizzalover" data-imagecode="5" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('6', this);">
                    </div>
                    <img src="img/fishbowling.jpg" alt="Fish jumping" style="width: 180px; height: 180px;"
                        class="pictures" id="fishbowling" data-imagecode="6" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('7', this);">
                    </div>
                    <img src="img/monkeys.jpg" alt="Monkeys" style="width: 180px; height: 180px;" class="pictures"
                        id="monkeys" data-imagecode="7">
                </td>
            </tr>
            <tr>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('6', this);">
                    </div>
                    <img src="img/fishbowling.jpg" alt="Fish jumping" style="width: 180px; height: 180px;"
                        class="pictures" id="fishbowling1" data-imagecode="6" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('2', this);">
                    </div>
                    <img src="img/confusedoldman.jpg" alt="Confused old man" style="width: 180px; height: 180px;"
                        class="pictures" id="confusedoldman1" data-imagecode="2" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('4', this);">
                    </div>
                    <img src="img/sparkles.jpg" alt="Sparkling lights" style="width: 180px; height: 180px;"
                        class="pictures" id="sparkles1" data-imagecode="4" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('8', this);">
                    </div>
                    <img src="img/redpanda.jpg" alt="A red panda" style="width: 180px; height: 180px;"
                        class="pictures" id="redpanda" data-imagecode="8">
                </td>
            </tr>
            <tr>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('1', this);">
                    </div>
                    <img src="img/programming.jpg" alt="jQuery code" style="width: 180px; height: 180px;"
                        class="pictures" id="programming1" data-imagecode="1" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('8', this);">
                    </div>
                    <img src="img/redpanda.jpg" alt="A red panda" style="width: 180px; height: 180px;"
                        class="pictures" id="redpanda1" data-imagecode="8" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('7', this);">
                    </div>
                    <img src="img/monkeys.jpg" alt="Monkeys" style="width: 180px; height: 180px;" class="pictures"
                        id="monkeys1" data-imagecode="7" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('5', this);">
                    </div>
                    <img src="img/pizzalover.jpg" alt="Loving the pizza" style="width: 180px; height: 180px;"
                        class="pictures" id="pizzalover1" data-imagecode="5" />
                </td>
            </tr>
        </table>
    </div>

`.each()` is wrong here. `$(".pictures").click(.....` is the proper way to bind to all elements with the `pictures` class — Wesley Smith, Feb 07 '17 at 10:38
Also, you are not properly comparing the clicks, clicking the same image twice incorrectly passes the test — Wesley Smith, Feb 07 '17 at 10:39
A complete solution with hiding images and all is given now!!!! Off Course Images are not given :) — Shiva K Thogiti, Feb 07 '17 at 11:38

jQuery and a basic memory game, why does it only kinda work?

4 Answers4

Working jsFiddle