previous

page 6

next
Click a Card:

Time to meet another attribute: onClick.

As the name suggests, this attribute is used to tell the browser what to do when someone clicks this card.
Try the next line in your file and see what happens when you click the card.

<img src='cards/back.png' onClick='alert("you clicked me");'>

If all went well, you should have got a little popup with the message you clicked me in it.

In the olden days, browsers could do little more than display pages with links to other pages.
A new language had to be invented to allow more to be done. This language is called JavaScript:

alert("you clicked me");

Ok! Let's try something closer to what we're trying to achieve in this project (the Pairs game in case you've forgotten). Try this:

<img src='cards/back.png' onClick='this.src="cards/1.png";'>

This time you should have seen the card magically change into the ace of spades. Not bad for just a single line, eh?

The very special word this refers to the whole image element.
This line of JavaScript

this.src='cards/1.png';

is simply telling the browser to replace the source with a different image.

previous
next