Récupération de la valeur cochée de boutons radio

Version imprimable

Bonjour, j'essaie de faire un QCM malgré mes connaissances très minimes. Quasiment tout est fini, cependant quand je mets une fausse réponse (que j'ai défini par 0 avec ma variable q1) ca me met qu'elle est bonne (donc qu'elle est en fait à 1). Je ne sais pas du tout où est mon erreur, le code me semble bon. Peut-être est-ce un problème dans les boutons de sélection de la réponse ou dans ma fonction ?
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 <html> <head> <title>Quiz</title> </head> <header> <script> function Question1() { if(q1=1) alert ('Bravo') else alert('Perdu !'); } </script> </header> <body bgcolor=#46aeff> <font face="verdana"> <center> Bienvenue sur mon quiz ! Répondez bon au questions et peut-être gagnerez vous un prix !</center> <b>Combien fait 5+5 ?<br></b> <input type="radio" name="q1" value="0">55 <input type="radio" name="q1" value="0">25 <input type="radio" name="q1" value="1">10<br> <input type="button" value=" Tu as fini le quiz ?" onclick="Question1();"> </body> </html>
Si quelqu'un connaitrait la réponse, ca me ferait plaisir :)

11/01/2015, 15h48
NoSmoking

Bonjour,
if(q1=1) est une affectation pas une comparaison. il faut utiliser == ou === pour comparer 2 éléments.
11/01/2015, 15h53
Invité

J'ai essayé avec == tout comme avec ===, aucun changement :?

EDIT : Ca casse le code, je n'ai même plus d'alerte quand je clique sur mon bouton pour vérifier la réponse. :?
11/01/2015, 16h16
NoSmoking

Tout ceci est normal, attendu que la variable n'est pas définie.

Dans ton premier code la varaible q1 déclarée sans mot clé var était considérée comme une nouvelle variable puisque tu lui affectais une valeur mais ce n'est plus le cas maintenant.

Il te faut récupérer les radio pour tester la valeur qui est associée à celui qui est coché.

Code:

var oRadio = document.getElementsByName('q1');
11/01/2015, 16h26
Invité

Je ne vais pas continuer à citer tous les problèmes pour pas déranger, mais ca ne veut toujours pas fonctionner...
J'ai pourtant placé le code que tu m'as donné dans la fonction Question1, mais ca marche pas :/

Citation:

J'ai pourtant placé le code que tu m'as donné dans la fonction Question1, mais ca marche pas :/

le morceau de code est insuffisant pour t'apporter la réponse, il te faut parcourir les éléments récupérés pour connaitre celui qui est coché puis récupérer sa valeur.

en gros, à l'ancienne pour comprendre ce que l'on fait
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function Question1() { var oRadio = document.getElementsByName('q1'), result, i, nb = oRadio.length; for (i = 0; i < nb; i++) { if (oRadio[i].checked) result = oRadio[i].value; } if (result == 1) { alert('Bravo') } else { alert('Perdu !'); } }
maintenant tu peux être plus "moderne" en utilisant la méthode querySelector (sur MDN)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function Question1() { var result, oRadio = document.querySelector('input[type=radio]:checked'); if (oRadio) { result = oRadio.value; } console.log(oRadio); if (result == 1) { alert('Bravo') } else { alert('Perdu !'); } }
si tu débutes en javascript, je t'engage fortement à regarder de prêt la documentation pour bien commencer et comprendre. De plus les exemples de Quizz foisonnent.

11/01/2015, 16h51
Invité

Un grand merci à toi ! :mrgreen:
Je vais suivre ton conseil, j'ai justement sous la main un pdf contenant plein d'infos pour m'aider :)

A+ ;)
11/01/2015, 17h01
NoSmoking
Dernier conseil avant que tu ne passes cette discussion en résolue ;)

Trame "minimaliste" conforme pour un fichier HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Le titre du document</title> <style> </style> <script> </script> </head> <body> </body> </html>
certaines balises sont PRIMORDIALES si l'on veut par exemple utiliser des méthodes telles que selectorQueryAll ou selectorQuery, je parle de <!DOCTYPE html> par exemple, sur IE.
11/01/2015, 17h01
SylvainPV

A noter que si l'on place les <input> dans un formulaire <form>, on peut aussi récupérer la valeur cochée simplement comme ça:

Code:

var result = document.forms[0].q1.value;

@NoSmoking: à part le doctype oublié, il me semble que sa trame est valide. Le charset est faculatatif et rien n'oblige de mettre CSS et scripts dans le head.

Je reviens déja (:roll:) car j'ai un tout petit problème. J'ai rajouté des questions, j'ai mis un ptit bouton pour le résultat...
Mais, le résultat est "NaN" 8O
J'ai mis des ParseInt en pensant que c'était peut-être du texte, mais rien n'y fait :weird:

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
 
<!DOCTYPE HTML SYSTEM>
<html>
 <head>
  <title>Quiz</title>
 </head>
 <header>
 
  <script>
  function Question1() {
    var oRadio = document.getElementsByName('q1'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
		result+1
		alert('Bravo ')
 
    } else {
        alert('Perdu !');
    }
}
 
function Question2() {
    var oRadio = document.getElementsByName('q2'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        alert('Bravo')
    } else {
        alert('Perdu !');
    }
}
 
function Question3() {
    var oRadio = document.getElementsByName('q3'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        alert('Bravo')
    } else {
        alert('Perdu !');
    }
}
 
function Question4() {
    var oRadio = document.getElementsByName('q4'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        alert('Bravo')
    } else {
        alert('Perdu !');
    }
}
 
function Question5() {
    var oRadio = document.getElementsByName('q5'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        alert('Bravo')
    } else {
        alert('Perdu !');
    }
}
 
function resultat() {
    var oRadio = document.getElementsByName('q1'),
		result, i, nb = oRadio.length;
	var oRadio = document.getElementsByName('q2'),
		result, i, nb = oRadio.length;
	var oRadio = document.getElementsByName('q3'),
		result, i, nb = oRadio.length;
	var oRadio = document.getElementsByName('q4'),
		result, i, nb = oRadio.length;
	var oRadio = document.getElementsByName('q5'),
		result, i, nb = oRadio.length;
	var q1=q1, q2=q2, q3=q3, q4=q4, q5=q5, result;
	result = q1 + q2 + q3 + q4 + q5;
	result= parseInt(result);
	alert(result);
 
}
 
  </script>
 </header>
 <body bgcolor=#46aeff>
  <font face="verdana">
   <center> Bienvenue sur mon quiz ! Répondez bon au questions et peut-être gagnerez vous un prix !</center>
 
    <br><b>Combien fait 5+5 en décimal ?<br></b>
 
 
    <input type="radio" name="q1" value="0">55
    <input type="radio" name="q1" value="0">25
    <input type="radio" name="q1" value="1">10<br>
    <input type="button" value=" Valider la réponse 1 ?" onclick="Question1();"><br><br>
 
 
	<br><b>Combien fait 1+1 en binaire ?<br></b>
 
 
    <input type="radio" name="q2" value="0">11
    <input type="radio" name="q2" value="1">10
    <input type="radio" name="q2" value="0">2<br>
    <input type="button" value=" Valider la réponse 2 ?" onclick="Question2();"><br><br>
 
 
	<br><b>Combien fait 2x4 en décimal ?<br></b>
 
 
    <input type="radio" name="q3" value="1">8
    <input type="radio" name="q3" value="0">6
    <input type="radio" name="q3" value="0">24<br>
    <input type="button" value=" Valider la réponse 3 ?" onclick="Question3();"><br><br>
 
 
	<br><b>Combien fait 29-5 en binaire ?<br></b>
 
 
    <input type="radio" name="q4" value="1">11000
    <input type="radio" name="q4" value="0">11001
    <input type="radio" name="q4" value="0">01101<br>
    <input type="button" value=" Valider la réponse 4 ?" onclick="Question4();"><br><br>
 
 
	<br><b>Combien fait 2^5 en binaire ?<br></b>
 
 
    <input type="radio" name="q5" value="1">100000
    <input type="radio" name="q5" value="0">10000
    <input type="radio" name="q5" value="0">1000000<br>
    <input type="button" value=" Valider la réponse 5 ?" onclick="Question5();"><br><br>
 
    <input type="button" value=" Score" onclick="resultat()";>
 
  </body>
</html>

11/01/2015, 19h00
NoSmoking
@SylvainPV

Citation:

@NoSmoking: à part le doctype oublié, il me semble que sa trame est valide. Le charset est faculatatif et rien n'oblige de mettre CSS et scripts dans le head.

Je suis tout à fait d'accord avec toi, on peut même se contenter de bien moins, mais cette structure me semble adaptée aux débutants afin de ne pas les retrouver sur les forums avec des problèmes basiques :aie:

@TT213
reprend tranquillement la logique de ton code par rapport à ce qu'il a été dit avant
Code:

1 2 var q1=q1, q2=q2, q3=q3, q4=q4, q5=q5, result; result = q1 + q2 + q3 + q4 + q5;
n'a aucun sens...

(tu pourrais même factoriser tes fonctions mais...)

J'ai pas mal réfléchi, et je me suis dit que vérifier les réponses une fois arrivé à la fin seulement était plus simple.
Cependant, un problème apparrait.

Le calcul du résultat fonctionne plus ou moins, car :
Quand on répond uniquement à la première question, si on répond bon on a 5. Pareil pour la deuxieme question, mais cette fois on a 5, puis 3 pour la 3e question, 2 pour la quatrième et 1 pour la 5ème.
C'est étrange, car au départ la variable est à 0.

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
 
<!DOCTYPE HTML SYSTEM>
<html>
 <head>
  <title>Quiz</title>
 </head>
 <header>
 
  <script>
  function resultat() {
  var score = 0
	var oRadio = document.getElementsByName('q1'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        var score = score+1
    } else {
        var score = score+0;
 
 
 
	} var oRadio = document.getElementsByName('q2'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        var score = score+1
    } else {
        var score = score+0;
 
 
 
	} var oRadio = document.getElementsByName('q3'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        var score = score+1
    } else {
        var score = score+0;
 
 
 
	} var oRadio = document.getElementsByName('q4'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        var score = score+1
    } else {
       var score = score+0;
 
 
 
	} var oRadio = document.getElementsByName('q5'),
        result, i, nb = oRadio.length;
    for (i = 0; i < nb; i++) {
        if (oRadio[i].checked) result = oRadio[i].value;
    }
    if (result == 1) {
        var score = score+1;
    } else {
        var score = score+0;
    }
 
	alert(score);
 
	}
 
  </script>
 </header>
 <body bgcolor=#46aeff>
  <font face="verdana">
   <center> Bienvenue sur mon quiz ! Répondez bon au questions et peut-être gagnerez vous un prix !</center>
 
    <br><b>Combien fait 5+5 en décimal ?<br></b>
 
 
    <input type="radio" name="q1" value="0">55
    <input type="radio" name="q1" value="0">25
    <input type="radio" name="q1" value="1">10<br>
 
 
	<br><b>Combien fait 1+1 en binaire ?<br></b>
 
 
    <input type="radio" name="q2" value="0">11
    <input type="radio" name="q2" value="1">10
    <input type="radio" name="q2" value="0">2<br>
 
 
	<br><b>Combien fait 2x4 en décimal ?<br></b>
 
 
    <input type="radio" name="q3" value="1">8
    <input type="radio" name="q3" value="0">6
    <input type="radio" name="q3" value="0">24<br>
 
 
	<br><b>Combien fait 29-5 en binaire ?<br></b>
 
 
    <input type="radio" name="q4" value="1">11000
    <input type="radio" name="q4" value="0">11001
    <input type="radio" name="q4" value="0">01101<br>
 
 
	<br><b>Combien fait 2^5 en binaire ?<br></b>
 
 
    <input type="radio" name="q5" value="1">100000
    <input type="radio" name="q5" value="0">10000
    <input type="radio" name="q5" value="0">1000000<br><br>
 
    <input type="button" value=" Score" onclick="resultat();">
 
  </body>
</html>

12/01/2015, 21h38
Invité

Bon, personne trouve ? J'en ai ras-le-bol de chercher :langue:
12/01/2015, 22h44
SylvainPV
Vu que tu nommes toutes tes variables pareilles et que tu les redéclares 5 fois, je ne suis pas vraiment surpris que tu ais des résultats incohérents. Un petit effort de factorisation évite bien des problèmes :
Code:

1 2 3 4 function resultat() { var score = document.querySelectorAll("input[type='radio'][value='1']:checked").length; alert(score); }
13/01/2015, 18h09
Invité

Je viens de voir ton message, mais j'avais déja résolu le problème avant pendant que j'avais pas internet :mrgreen:
J'ai mit au lieu de tout le temps avoir 1 comme variable, 1,2,3,4,5... jusqu'à 10, car j'ai rajouté des questions.

Ceci dit merci, ca me permet de réduire et donc de simplifier mon code :)