How do I turn cards over using onClick?

Question

Currently my cards are currently face down with the code* below. How would i go about changing them to face up using onClick functions? How would I then be able to use the ids to place in an Array and then use the IDs to get images from my images?

HTML

<table style="width:100%">
  <tr>
    <td><img src="cards_gif/b.gif" Class="back" id="0" onClick="flipCard()"></td>
    <td><img src="cards_gif/b.gif" Class="back" id="1" onClick="flipCard()"></td>
    <td><img src="cards_gif/b.gif" Class="back" id="2" onClick="flipCard()"></td>
  </tr>
  <tr>
   <td><img src="cards_gif/b.gif" Class="back" id="3" onClick="flipCard()"></td>
   <td><img src="cards_gif/b.gif" Class="back" id="4" onClick="flipCard()"></td>
   <td><img src="cards_gif/b.gif" Class="back" id="5" onClick="flipCard()"></td>
  </tr>
  <tr>
  <td><img src="cards_gif/b.gif" Class="back" id="6" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="7" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="8" onClick="flipCard()"></td>
  </tr>
  <tr>
  <td><img src="cards_gif/b.gif" Class="back" id="9" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="10" onClick="flipCard()"></td>
  <td><img src="cards_gif/b.gif" Class="back" id="11" onClick="flipCard()"></td>
  </tr>
</table>

CSS

<style>
* {
    background-color: lightblue;
    border-color: hsla(173,100%,50%,1.00);
    font-weight: bold;  
}

.back {
    width:100px;
    height:100px;
}
</style>

JS

function flipCard(theElementID){
    /*var cardID = ["c1","c2","c3"];""3","4","5","6","7","8","9","10","11","12"]; *//ignore
    var theElement.src = document.getElementById(theElementID);
    theElement.src ="c1.gif";
    document.getElementById(c1.gif")
} // don't really understand this function. I also tried using an array to pick the card image if that makes sense.

`onClick="flipCard(this.id)"` to pass the id to the function — Banana, Apr 30 '15 at 16:48
Why not? @Huangism. What if I wanted to link it an an array with images? Example cards=["c1.gif"] Is that possible? — Korey, Apr 30 '15 at 18:30
@KoreyAbbott read the answer here carefully http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number — Huangism, Apr 30 '15 at 18:53

garryp · Answer 1 · 2015-04-30T19:33:47.383

2

Get rid of the onclick attribute which is needlessly repeated 12 times and wire a click event up to the image by css class in five lines of jQuery:

$(function() {
    $('.back').on('click', function() {
        flipCard(this.id); //Pass the img id to flipCard
    }); 
});

The original code has a few errors. See this fiddle which should give you some help: http://jsfiddle.net/GarryPas/gam8tcx7/2/

edited Apr 30 '15 at 19:33

answered Apr 30 '15 at 18:02

garryp

5,508
1
29
41

Would'nt it be better to wrap it inside an element with an ID and then bind the .on on that one like $('#element').on('click', '.back', function(){ }); – Jacta Apr 30 '15 at 18:04
You mean in the HTML markup? Edit: sorry didn't see your edit – garryp Apr 30 '15 at 18:06
Does'nt the way to do it bind on every element where mine will make one bind - not that it really matters that much – Jacta Apr 30 '15 at 18:07
You'd have to repeat it for each element if you were to do it by ID. – garryp Apr 30 '15 at 18:10
It's syntax for the jQuery object, identical to using "jQuery". In JS names can include $ symbols. – garryp Apr 30 '15 at 18:17
Ah i've given up for today. I'll try again tomorrow but I doubt i'll get it. – Korey Apr 30 '15 at 19:11
See the fiddle I've added to my original answer. That should help you – garryp Apr 30 '15 at 19:34
Many thanks for your help @garryp i'm going to have a fiddle with my JavaScript and try and get it to work now. :) – Korey May 01 '15 at 14:05

How do I turn cards over using onClick?

1 Answers1