condition sur des radio

**mentat** · 03/09/2010, 17h14

Bonjour,

Je crée un petit bout de code en Java script afin de faire un petit jeux QCM.

le principe est simple dans une Page HTML j'ai fait un petit tableau. dans ce tableau il y a plusieurs images aux quels on trouvent dessous chacune une Form contenant 4 input radio.

Lorsque l'on clic sur le bon radio correspondant à l'image je donne 1 points.

j'ai crée un input button qui permet de vérifier son score à la fin.

Seulement j'ai deux problème:

- Le premier je souhaiterai que l'input button apparaisse que Lorsque la personne à répondu à toute les images.

- Le second c'est un problème sur les points quand je clic sur la réponse 4 il ne me compte pas le point je ne sais pas pourquoi...

voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<TABLE width="546" align="center">
<TR align="center">
<TD><img src="Auxine2.jpg" alt="" align="center" style="border: 0;" /></TD>
<TD><img src="Auxine2.jpg" alt="" align="center" style="border: 0;" /></TD>
<TD><img src="Auxine2.jpg" alt="" align="center" style="border: 0;" /></TD>
</TR>
 
<TR>
 
<TD><form name="aa">
<font size="2px">
<ul>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Alderache</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Armand Trueman</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Chewingum</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Demoniak64</li>
</ul>
</font></form></TD>
 
<TD><form name="bb">
<font size="2px">
<ul>
      <li><input type="radio" name="dmc" value="1" onClick="BP()" >Hal9000</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()" >Juventus</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()" >Ketzac</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Levieux</li>
</ul>
</font></form></TD>
 
<TD><form name="cc">
<font size="2px">
<ul>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Wendy</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Dupont</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Xeno37laveugle</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">K4ma</li>
</ul>
</font></form></TD>
 
<TR align="center">
<TD><img src="Auxine2.jpg" alt="" align="center" style="border: 0;" /></TD>
<TD><img src="Auxine2.jpg" alt="" align="center" style="border: 0;" /></TD>
<TD><img src="Auxine2.jpg" alt="" align="center" style="border: 0;" /></TD>
</TR>
 
<TR>
 
<TD><form name="dd">
<font size="2px">
<ul>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Kermyte</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Mandragor</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Socar</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Alexclose</li>
</ul>
</font></form></TD>
 
<TD><form name="ee">
<font size="2px">
<ul>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Obiwan</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Cryst@lw@ll</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Deux nids</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Division master</li>
</ul>
</font></form></TD>
 
<TD><form name="ff">
<font size="2px">
<ul>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Guigui</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Lefty</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Mentat</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Venin</li>
</ul>
</font></form></TD>
 
<TR>
<TD><form name="gg">
<font size="2px">
<ul>
		<li><input type="radio" name="dmc" value="1" onClick="BP()">Didi</li>
		<li><input type="radio" name="dmc" value="1" onClick="BP()">Magik</li>
</ul>
</font></form></TD></TR>
 
<TR>
<TD> <BR>
</TD>
</TR>
 
<TR>
<TD>
</TD>
<TD align="center"><form name="res">
Note<input size="5" type="text" name="points"> /10.<BR>
<div id="bouton" style="visibility:";><input type="button" name="bout" value="Tester"  onClick="teste()" border="0"></div>
</form></TD></TR></TABLE>
 
<script type="text/javascript">
 
document.getElementById("bouton").style.visibility="visible";
 
function teste() {
 document.forms.res.points.value ="";
 
 var somme = 0;L
 
  for (i=0;i<100;i++) {	
    if (document.forms.aa.dmc[i].checked==true) {
      somme = Number(document.forms.res.points.value) + Number(document.forms.aa.dmc[i].value)
	  document.forms.res.points.value = somme;
    }
	if (document.forms.bb.dmc[i].checked==true) {
      somme = Number(document.forms.res.points.value) + Number(document.forms.bb.dmc[i].value)
	  document.forms.res.points.value = somme;
	 }
	 if (document.forms.cc.dmc[i].checked==true) {
      somme = Number(document.forms.res.points.value) + Number(document.forms.cc.dmc[i].value)
	  document.forms.res.points.value = somme;
     }
	 if (document.forms.dd.dmc[i].checked==true) {
      somme = Number(document.forms.res.points.value) + Number(document.forms.dd.dmc[i].value)
	  document.forms.res.points.value = somme;
    }
	if (document.forms.ee.dmc[i].checked==true) {
     somme = Number(document.forms.res.points.value) + Number(document.forms.ee.dmc[i].value)
	 document.forms.res.points.value = somme;
    }
	if (document.forms.ff.dmc[i].checked==true) {
     somme = Number(document.forms.res.points.value) + Number(document.forms.ff.dmc[i].value)
	 document.forms.res.points.value = somme;
    }
	if (document.forms.gg.dmc[i].checked==true) {
     somme = Number(document.forms.res.points.value) + Number(document.forms.gg.dmc[i].value)
	 document.forms.res.points.value = somme;
  }
 }
}
</script>

Merci à tous pour le temps que vous consacrez à nos problèmes...

**Lenézé** · 03/09/2010, 18h32

Bonjour,

onClick="BP()" appelle quelle fonction?
Je ne la vois pas dans le code fournis.

Au plaisir de te lire,
Cdt,

Lenézé

**mentat** · 03/09/2010, 19h01

Salut Lenézé,

Oui à l'origine je voulais mettre quelque chose qui ressemble à:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
document.getElementById("bouton").style.visibility="hidden";
 
function BP() {
 
if ((document.forms.aa.dmc.checked==true) &&(document.forms.bb.dmc.checked==true)&&(document.forms.cc.dmc.checked==true)&&(document.forms.dd.dmc.checked==true)&&(document.forms.ee.dmc.checked==true)&&(document.forms.ff.dmc.checked==true)&&(document.forms.gg.dmc.checked==true)) {
 
document.getElementById("bouton").style.visibility="visible";
}
}

mais ça ne fonctionne pas...

Merci de ton aide.

**Lenézé** · 03/09/2010, 19h23

Voici un morceau de code fonctionnel qui devrait t'aider à avancer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.getElementById("bouton").style.visibility="hidden";
 
function BP() {
var checkaa = false;
 for (var i=0; i<document.forms.aa.dmc.length;i++) {
         if (document.forms.aa.dmc[i].checked) {
         checkaa = true;
      }
	  }
if (checkaa ) {
 
document.getElementById("bouton").style.visibility="visible";
}
}

**mentat** · 03/09/2010, 20h15

Ok ça fonctionne nickel...
Bon le copié coller n'était pas trop difficile à faire lol

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function BP() {
 
var checkaa = false;
var checkbb = false;
var checkcc = false;
var checkdd = false;
var checkee = false;
var checkff = false;
var checkgg = false;
 for (var i=0; i<document.forms.aa.dmc.length;i++) {
         if (document.forms.aa.dmc[i].checked) {
         checkaa = true;
      }
	  }
 
 for (var i=0; i<document.forms.bb.dmc.length;i++) {
         if (document.forms.bb.dmc[i].checked) {
         checkbb = true;
      }
	  }
 
 for (var i=0; i<document.forms.cc.dmc.length;i++) {
         if (document.forms.cc.dmc[i].checked) {
         checkcc = true;
      }
	  }
 
 for (var i=0; i<document.forms.dd.dmc.length;i++) {
         if (document.forms.dd.dmc[i].checked) {
         checkdd = true;
      }
	  }
 for (var i=0; i<document.forms.ee.dmc.length;i++) {
         if (document.forms.ee.dmc[i].checked) {
         checkee = true;
      }
	  }
 
 for (var i=0; i<document.forms.ff.dmc.length;i++) {
         if (document.forms.ff.dmc[i].checked) {
         checkff = true;
      }
	  }
 
 for (var i=0; i<document.forms.gg.dmc.length;i++) {
         if (document.forms.gg.dmc[i].checked) {
         checkgg = true;
      }
	  }
if (checkaa & checkbb & checkcc & checkdd & checkee & checkff & checkgg) {
 
document.getElementById("bouton").style.visibility="visible";
}
}

Par contre j'ai toujours une erreur dans mon code sur le calcul du résultat lorsque je coche la 4ème radio il ne m'additionne pas la valeur qui est pourtant à 1 dans le code...

Voici mes form contenant les radio, elles sont toutes du même type:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<TD><form name="ee">
<font size="2px">
<ul>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Obiwan</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Cryst@lw@ll</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Deux nids</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Division master</li>
</ul>
</font></form></TD>
 
<TD><form name="ff">
<font size="2px">
<ul>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Guigui</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Lefty</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Mentat</li>
      <li><input type="radio" name="dmc" value="1" onClick="BP()">Venin</li>
</ul>
</font></form></TD>

Voici la fonction calcul:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function teste() {
 document.forms.res.points.value ="";
 
 var somme = 0;
 
  for (i=0;i<4;i++) {	
    if (document.forms.aa.dmc[i].checked==true) {
      somme = Number(document.forms.res.points.value) + Number(document.forms.aa.dmc[i].value)
	  document.forms.res.points.value = somme;
    }
	if (document.forms.bb.dmc[i].checked==true) {
      somme = Number(document.forms.res.points.value) + Number(document.forms.bb.dmc[i].value)
	  document.forms.res.points.value = somme;
	 }
	 if (document.forms.cc.dmc[i].checked==true) {
      somme = Number(document.forms.res.points.value) + Number(document.forms.cc.dmc[i].value)
	  document.forms.res.points.value = somme;
     }
	 if (document.forms.dd.dmc[i].checked==true) {
      somme = Number(document.forms.res.points.value) + Number(document.forms.dd.dmc[i].value)
	  document.forms.res.points.value = somme;
    }
	if (document.forms.ee.dmc[i].checked==true) {
     somme = Number(document.forms.res.points.value) + Number(document.forms.ee.dmc[i].value)
	 document.forms.res.points.value = somme;
    }
	if (document.forms.ff.dmc[i].checked==true) {
     somme = Number(document.forms.res.points.value) + Number(document.forms.ff.dmc[i].value)
	 document.forms.res.points.value = somme;
    }
	if (document.forms.gg.dmc[i].checked==true) {
     somme = Number(document.forms.res.points.value) + Number(document.forms.gg.dmc[i].value)
	 document.forms.res.points.value = somme;
    }
  }
}

**Lenézé** · 03/09/2010, 22h18

Bonsoir,

Le problème est simple (si si)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for (i=0;i<4;i++) {

Que fait cela?
Ton code fait les vérifications sur 4 boutons radios à chaque fois.
Si des boutons ne sont pas trouvés le code plante.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<TD><form name="gg">
<font size="2px">
<ul>
		<li><input type="radio" name="dmc" value="1" onClick="BP()">Didi</li>
		<li><input type="radio" name="dmc" value="1" onClick="BP()">Magik</li>
</ul>

Rajoute deux boutons radios (pour qu'il y en ai 4 à chaque fois) et ton code fonctionnera.
Il est donc évident qu'il faut le remanier

Concernant le bout de code donné, tu peux facilement faire une boucle afin d'éviter les CC. A toi de voir!

Au plaisir de te lire,
Lenézé

condition sur des radio

JavaScript

Vue hybride

Discussions similaires

Partager

Partager