Non prise en compte événement click sur tous les éléments

Version imprimable

Bonjour.

Je travaille sur un jeu de cartes en JavaScript. Il y a 40 cartes tournées face recto. Ce que j'aimerai obtenir, c'est que lorsque je clique sur chacune des cartes, elle affiche la face verso et que si je clique sur une carte déjà retournée, une alerte nous dit que la carte est déjà retournée.

Mon script est "presque" bon, il fonctionne pour les 12 premières cartes. A partir de la 13ème, le clic sur une carte tournée face recto affiche l'alerte au lieu de la face verso... :( Ci-dessous, mon script. J'espère que quelqu'un pourra m'aider. Merci d'avance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<script language="JavaScript">
imgLoaded = 0;
CountAffichImg = new Array;
PathImg = new Array;
ImgRecord = new Array;
a1 = new Image;
a2 = new Image;
a2.src = 'images/Recto_Cartes.gif'; // Recto de la carte
function loadImg()
{
a1.src = "images/1.png";
CountImg();
a1.src = "images/2.png";
CountImg();
a1.src = "images/3.png";
CountImg();
a1.src = "images/4.png";
CountImg();
a1.src = "images/5.png";
CountImg();
a1.src = "images/6.png";
CountImg();
a1.src = "images/7.png";
CountImg();
a1.src = "images/8.png";
CountImg();
a1.src = "images/9.png";
CountImg();
a1.src = "images/10.png";
CountImg();
a1.src = "images/11.png";
CountImg();
a1.src = "images/12.png";
CountImg();
a1.src = "images/13.png";
CountImg();
a1.src = "images/14.png";
CountImg();
a1.src = "images/15.png";
CountImg();
a1.src = "images/16.png";
CountImg();
a1.src = "images/17.png";
CountImg();
a1.src = "images/18.png";
CountImg();
a1.src = "images/19.png";
CountImg();
a1.src = "images/20.png";
CountImg();
a1.src = "images/21.png";
CountImg();
a1.src = "images/22.png";
CountImg();
a1.src = "images/23.png";
CountImg();
a1.src = "images/24.png";
CountImg();
a1.src = "images/25.png";
CountImg();
a1.src = "images/26.png";
CountImg();
a1.src = "images/27.png";
CountImg();
a1.src = "images/28.png";
CountImg();
a1.src = "images/29.png";
CountImg();
a1.src = "images/30.png";
CountImg();
a1.src = "images/31.png";
CountImg();
a1.src = "images/32.png";
CountImg();
a1.src = "images/33.png";
CountImg();
a1.src = "images/34.png";
CountImg();
a1.src = "images/35.png";
CountImg();
a1.src = "images/36.png";
CountImg();
a1.src = "images/37.png";
CountImg();
a1.src = "images/38.png";
CountImg();
a1.src = "images/39.png";
CountImg();
a1.src = "images/40.png";
CountImg();
RandomMem('i11',11);
RandomMem('i12',12);
RandomMem('i13',13);
RandomMem('i14',14);
RandomMem('i15',15);
RandomMem('i16',16);
RandomMem('i21',21);
RandomMem('i22',22);
RandomMem('i23',23);
RandomMem('i24',24);
RandomMem('i25',25);
RandomMem('i26',26);
RandomMem('i31',31);
RandomMem('i32',32);
RandomMem('i33',33);
RandomMem('i34',34);
RandomMem('i35',35);
RandomMem('i36',36);
RandomMem('i41',41);
RandomMem('i42',42);
RandomMem('i43',43);
RandomMem('i44',44);
RandomMem('i45',45);
RandomMem('i46',46);
RandomMem('i51',51);
RandomMem('i52',52);
RandomMem('i53',53);
RandomMem('i54',54);
RandomMem('i55',55);
RandomMem('i56',56);
RandomMem('i61',61);
RandomMem('i62',62);
RandomMem('i63',63);
RandomMem('i64',64);
RandomMem('i65',65);
RandomMem('i66',66);
RandomMem('i71',71);
RandomMem('i72',72);
RandomMem('i73',73);
RandomMem('i74',74);
}
 
function CountImg()
{
PathImg[imgLoaded] = a1.src;
CountAffichImg[imgLoaded] = 0;
imgLoaded++;
return(true)
}
 
function RandomMem(imgName,ImgNb)
{
ImgTemp = Math.round(Math.random() * 39);
while (CountAffichImg[ImgTemp]>=1)
{
ImgTemp = Math.round(Math.random() * 39);
}
ImgRecord[ImgNb] = PathImg[ImgTemp];
CountAffichImg[ImgTemp]++;
return(true);
}
 
function AddClic(ImgNb,ImgName)
{
	if (ImgName.src != a2.src)
		{
		alert('Cette image est déja retournée...');
		}
		else
		{
		ImgName.src = ImgRecord[ImgNb];
		}
}
</script>

11/10/2014, 00h23
Watilin

Citation:

Envoyé par pat_fr38

Mon script est "presque" bon, il fonctionne pour les 12 premières cartes. A partir de la 13ème, le clic sur une carte tournée face recto affiche l'alerte au lieu de la face verso...

C'est tout à fait normal. L'utilisation du nombre 13 est déconseillée en JavaScript car ça porte malheur. Une recommendation officielle a été publiée en 1998, conseillant aux développeurs d'éviter de créer des applications utilisant ce nombre.
11/10/2014, 03h35
kaari kosaku

Tiens, voici un cadeau : wiki.
11/10/2014, 07h03
pat_fr38

Je me demande si je dois remercier pour les réponses reçues, car elles ne m’apportent pas grand chose de plus... C'est une blague cette histoire du 13 ?... Le JavaScript est superstitieux ? :ptdr: Car avec la carte 14, 15, 16, etc jusqu'à la 40 et dernière, ça ne marche pas non plus. Donc on ne pourrait faire que des boucles qui aillent jusqu'à 12 maximum ? Alors je fais comment dans mon cas, SVP ? Pas de solution ?... :(
11/10/2014, 13h28
Watilin
Désolé pour cette réponse pas sérieuse.

Il n'y a rien dans ton script qui explique, au 1er regard, ce problème à la 13e image. Il faut chercher l'explication ailleurs, et je crois qu'elle vient du fait que tu utilises le même objet image pour charger toutes les images. C'est peut-être une histoire de cache, je ne vais pas avancer d'hypothèse. Tu auras peut-être des résultats différents avec un autre navigateur ou un autre OS.

Quoiqu'il en soit, tu devrais utiliser un tableau d'objets images, par exemple var images = [];, puis dans une boucle (oui, l'intervention de Kaari Kosaku était pertinente) tu initialises chaque image et tu donnes une src différente à chacune. Note que je préfère la syntaxe [] à new Array car elle est universelle en JavaScript, plus concise et non ambigüe.

Autre chose, les images ne chargent pas instantanément. Quand tu donnes une src à une image en JavaScript, le script se contente d'initialiser la requête HTTP qui va ramener l'image ; il continue son exécution sans attendre la réponse. Autrement dit, JavaScript charge les images de façon asynchrone. Pour vérifier qu'une image est chargée, tu dois utiliser l'évènement onload :
Code:

1 2 3 4 image.onload = function() { // cette fonction sera automatiquement appelée au chargement de l'image imgLoaded++; };
11/10/2014, 13h39
pat_fr38

Ah, là je peux remercier pour cette réponse : MERCI ! Là, je sens l'expert ;)

La difficulté qui s'ajoute à l'affichage des 40 cartes, qui composent donc un paquet, c'est que ces 40 cartes sont toutes différentes d'une part, mais en plus, tu l'auras sans doute vu dans mon script avec Math.round et Math.random, elles sont toutes affichées dans un ordre au hasard et différent à chaque ouverture/lancement du jeu...

Concernant le navigateur utilisé pour afficher ma page, il s'agit pour ma part de Mozilla Firefox...

Je vais tenter de modifier mon script en essayant d'appliquer tes conseils, mais ce n'est pas gagné... :mouarf:

Merci encore de la réponse et de l'aide apportée.