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

Invité · 11/01/2015, 16h21

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 html :

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
<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

**NoSmoking** · 11/01/2015, 16h48

Bonjour,
if(q1=1) est une affectation pas une comparaison. il faut utiliser == ou === pour comparer 2 éléments.

Invité · 11/01/2015, 16h53

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.

**NoSmoking** · 11/01/2015, 17h16

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 :

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

var oRadio = document.getElementsByName('q1');

Invité · 11/01/2015, 17h26

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 :/

**NoSmoking** · 11/01/2015, 17h48

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 :

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

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 :

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

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.

Invité · 11/01/2015, 17h51

Un grand merci à toi !

Je vais suivre ton conseil, j'ai justement sous la main un pdf contenant plein d'infos pour m'aider

A+

**NoSmoking** · 11/01/2015, 18h01

Dernier conseil avant que tu ne passes cette discussion en résolue

Trame "minimaliste" conforme pour un fichier HTML

Code html :

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

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.

**SylvainPV** · 11/01/2015, 18h01

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 :

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

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.

Invité · 11/01/2015, 18h33

Je reviens déja (

) 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"

J'ai mis des ParseInt en pensant que c'était peut-être du texte, mais rien n'y fait

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
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>

**NoSmoking** · 11/01/2015, 20h00

@SylvainPV

@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

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

Code :

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

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...)

Invité · 11/01/2015, 22h24

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 :

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
 
<!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>

Invité · 12/01/2015, 22h38

Bon, personne trouve ? J'en ai ras-le-bol de chercher

**SylvainPV** · 12/01/2015, 23h44

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 :

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

1
2
3
4
function resultat() {    
   var score = document.querySelectorAll("input[type='radio'][value='1']:checked").length;
   alert(score);
}

Invité · 13/01/2015, 19h09

Je viens de voir ton message, mais j'avais déja résolu le problème avant pendant que j'avais pas internet

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

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

JavaScript

Discussions similaires

Partager

Partager