Using Different Cards

Not much fun if every card is the same, eh?
The solution is to make up our own attribute.
I've called mine n. Have a look.

<img src='cards/back.png' n='12' onClick='card_clicked(this);'>
<img src='cards/back.png' n='52' onClick='card_clicked(this);'>
<img src='cards/back.png' n='38' onClick='card_clicked(this);'>
<img src='cards/back.png' n='26' onClick='card_clicked(this);'>
<script>
  function card_clicked(image) {
    image.src='cards/13.png';
    setTimeout(turn,2000,image);
  }
  function clear(image) {
    image.src='cards/0.png';
  }
  function turn(image) {
    image.src='cards/back.png';
  }
</script>

So how do we use this attribute?
We rewrite our card_clicked function so it looks like this:

  function card_clicked(image) {
    var n=image.getAttribute('n');
    image.src='cards/'+n+'.png';
    setTimeout(turn,2000,image);
  }

var tells JavaScript that what follows is a variable -
think of it like a post office box.