
previous

page 10
next
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>
<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 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.
previous
next