Etape 4 – Ajout de l’interactivité
Dans cette étape, nous allons permettre à l’utilisateur de retourner les cartes en cliquant dessus.
Pour cela, nous allons ajouter la prise en compte de l’événement onclick dans la fonction affiche_image() :
img.onclick = function() {
document.getElementById(id).src = name;
setTimeout(function() {document.getElementById(id).src = ‘dos.jpg’; } , 1000);
}
Lorsqu’une image est cliquée, la fonction affectée à img.onclick est exécutée.
La première instruction affecte le contenu de l’attribut name à l’attribut src de l’image. Rappelez-vous, l’attribut name contient une chaîne du type 1.jpg, 2.jpg, etc. qui donne le nom de la figure représentée sur la carte. En affectant cette valeur à l’attribut source de la carte, la carte apparaît sur l’écran.
La deuxième instruction retourne la carte au bout d’une seconde. Pour cela, un timer est mis en place avec la fonction setTimeout(). Cette fonction admet deux paramètres :
- Les instructions à exécuter ;
- Le délai en millisecondes au bout duquel ces instructions sont exécutées.
Comme vous le voyez, l’instruction exécutée au bout de 1000 millisecondes, c’est-à-dire au bout d’une seconde, cache la carte qui a été cliquée en affichant son dos.
