bouton radio couleur

**E.Bzz** · 10/06/2010, 17h18

Je te laisse relire ça tranquillement parce que maintenant je suis sûr que tu vas trouver tout seul une grande partie des erreurs

A+

**fado59** · 10/06/2010, 17h26

a bon tu vois une erreur sur ce que je viens de te donner ? le script c'est sa ?

**E.Bzz** · 10/06/2010, 17h28

Ce qui me choque le plus (pour l'instant ...) est au niveau du HTML et non du JavaScript

A+

**fado59** · 10/06/2010, 17h31

c'est sur que c'est pas esthétique je débute mais bon, mon principale soucis est ce javascript, j'essaye d'avoir en couleur le choix du texte des boutons radios mais impossible.

**RomainVALERI** · 10/06/2010, 17h34

Envoyé par E.Bzz

Ce qui me choque le plus (pour l'instant ...) est au niveau du HTML et non du JavaScript

A+

Je crois avoir trouvé ce à quoi fait référence notre ami E.Bzz :
Ton script a le même problème que ce chien. ^^

**E.Bzz** · 10/06/2010, 17h36

Envoyé par fado59

c'est sur que c'est pas esthétique je débute mais bon, mon principale soucis est ce javascript, j'essaye d'avoir en couleur le choix du texte des boutons radios mais impossible.

Non ce n'est pas esthétique, et surtout pas du tout pratique à lire

Mais ce n'était pas le problème.

Ce que j'essaye de te dire c'est que tant que ton HTML est bancale, il ne faut pas t'attendre à un fonctionnement JavaScript correct.

corrige d'abord les (gros) problèmes liés au HTML, et ensuite seulement il sera possible de voir ce qui ne va pas dans ton code JavaScript.
Il est possible qu'il soit déjà bon mais que les anomalies HTML l'empêchent de fonctionner correctement ...

A+

**E.Bzz** · 10/06/2010, 17h37

Envoyé par RomainVALERI

Ton script a le même problème que ce chien. ^^

EDIT : j'ajouterais quand même "entre autres"

**RomainVALERI** · 10/06/2010, 17h40

<stop ironie>
il y a deux sections head dans ta page

</stop ironie>

**fado59** · 10/06/2010, 17h47

ok je vais tester
J'ai même tester le js apars dans une nouvelle fenetre sa ne fonctionne pas

EDIT : je ne vois pas deux sections head, je suis aveugle?

**E.Bzz** · 10/06/2010, 17h49

Envoyé par fado59

c'est sur que c'est pas esthétique

J'ai édité ton code pour améliorer ce point-là

A+

**fado59** · 10/06/2010, 17h52

Merci beaucoup ^^

Mais le javascript ne fonctionne toujours pas, un soucis dans la syntaxe? trop bizarre cette histoire, je vais devenir fou lol.

Vous en pensez quoi?

Je bloque complètement là....

Pas envie de laisser tomber si près du but

Si quelqu'un voit c'est quoi le soucis

Si tu peux me dire quoi RomainVALERI quand tu rentrera ce soir. Merci d'avance pour votre aide

**vermine** · 10/06/2010, 18h49

Pour qu'on sache où vous en êtes, il nous faudrait la nouvelle version du code HTML.

**fado59** · 10/06/2010, 18h51

la page lorsque j'ouvre le navigateur le code source?

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
 
 
<html>
<head>
  <title>Quiz Info De Base</title>
  <style>
    body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      background-color: #ffffff;
	  background-attachment : fixed;
      font-size: 11px;
    }
 
    .orange {
      color: #ff6600;
      font-weight: bold;
	}
 
  </style>
</head>
<body background=image/imagefond.jpg>                                    
  <head>
<script type="text/javascript">
function basculeOrange(elem) {
   var spans = document.getElementsByTagName('SPAN');
   for (var i = 0; i < spans.length; i++) {
      if (spans[i].className.indexOf('orange') > -1) { spans[i].className = ""; }
      if (spans[i] == elem) { elem.className = 'orange'; }
   }
}
</script>
</head>
<input onclick='history.go(-1)'  type='image' name='image' value='Retour' src='image/boutonretour.gif'/>
<center>
 
<FONT face="French Script MT" size="50" >Initiation : Info De Base</FONT>
</center>
<br><center><FONT face="French Script MT" size="5" ><b>Avant de commencer le Quiz, merci de remplir les champs Nom et Prénom</b></FONT>
</center>
<br><center><FONT face="French Script MT" size="5" ><b>Vérifiez bien que vous avez répondu à toutes les questions puis valider</b></FONT>
</center>
<br><center><FONT face="French Script MT" size="5" ><b>Attention : Toutes les questions ont une réponse cochée par défaut.</b></FONT>
</center>
<br><center><FONT face="French Script MT" size="5" ><b>Ce nest pas obligatoirement la bonne réponse.</b></FONT>
</center>
<br><center><FONT face="French Script MT" size="5" ><b>1 seule réponse par question est possible.</b></FONT>
 
</center>
<br><center><FONT face="French Script MT" size="5" ><b>Bonne Chance.</b></FONT>
</center><br>
<form id="form1" action="/Projet_Quiz_SQ/Utilisateur_Quiz_Des_Initiations/infodebase.php" method='post'>
<b> Votre Nom :</b><input type=text name="nom">
<b> Votre Prénom :</b> <input type=text name="prenom">
<br><br>
<blockquote><span class="orange"><u>Question 1</u> : Quel dossier est spécialement prévu pour vous permettre de stocker vos données personnelles ?</span>
 
<br /><br />
<input type='radio' name="0" checked='checked' onclick='basculeOrange(this)'  value="1" /> Ordinateur
<br /> <input type='radio' name="0" checked='checked' onclick='basculeOrange(this)'  value="2" /> Documents
<br /> <input type='radio' name="0" checked='checked' onclick='basculeOrange(this)'  value="3" /> Corbeille
<br /> </blockquote>
<blockquote><span class="orange"><u>Question 2</u> : Quelle est la version la plus récente de Windows ?</span>
<br /><br />
<input type='radio' name="1" checked='checked' onclick='basculeOrange(this)'  value="1" /> XP
 
<br /> <input type='radio' name="1" checked='checked' onclick='basculeOrange(this)'  value="2" /> Millenium
<br /> <input type='radio' name="1" checked='checked' onclick='basculeOrange(this)'  value="3" /> Seven (7)
<br /> <input type='radio' name="1" checked='checked' onclick='basculeOrange(this)'  value="4" /> 98
<br /> <input type='radio' name="1" checked='checked' onclick='basculeOrange(this)'  value="5" /> Vista
<br /> </blockquote>
<blockquote>
<span class="orange"><u>Question 3</u> : Parmi ces unités de mesure, quelle valeur est la plus importante ?</span>
 
<br /><br />
<input type='radio' name="2" checked='checked' onclick='basculeOrange(this)'  value="1" /> Mega-Octet
<br /> <input type='radio' name="2" checked='checked' onclick='basculeOrange(this)'  value="2" /> Kilo-Octet
<br /> <input type='radio' name="2" checked='checked' onclick='basculeOrange(this)'  value="3" /> Giga-Octet
<br /> </blockquote>
<blockquote><span class="orange"><u>Question 4</u> : Parmi ces supports de stockage, lequel a disparu ?</span>
<br /><br />
<input type='radio' name="3" checked='checked' onclick='basculeOrange(this)'  value="1" /> La clef USB
 
<br /> <input type='radio' name="3" checked='checked' onclick='basculeOrange(this)'  value="2" /> La disquette
<br /> <input type='radio' name="3" checked='checked' onclick='basculeOrange(this)'  value="3" /> Le CD-ROM
<br /> 
</blockquote>
<blockquote><span class="orange"><u>Question 5</u> : Que trouve t-on dans la colonne de gauche du menu DEMARRER</span>
<br /><br /><input type='radio' name="4" checked='checked' onclick='basculeOrange(this)'  value="1" /> La météo
<br /> <input type='radio' name="4" checked='checked' onclick='basculeOrange(this)'  value="2" /> Vos documents
 
<br /> <input type='radio' name="4" checked='checked' onclick='basculeOrange(this)'  value="3" /> Vos programmes
<br /> 
</blockquote>
<blockquote><span class="orange"><u>Question 6</u> : ?</span><br /><br /><input type='radio' name="5" checked='checked' onclick='basculeOrange(this)'  value="1" /> ?
<br /> <input type='radio' name="5" checked='checked' onclick='basculeOrange(this)'  value="2" /> ?
<br /> <input type='radio' name="5" checked='checked' onclick='basculeOrange(this)'  value="3" /> ?
<br /> <input type='radio' name="5" checked='checked' onclick='basculeOrange(this)'  value="4" /> ?
 
<br /> 
</blockquote>
<blockquote><span class="orange"><u>Question 7</u> : ?</span><br /><br /><input type='radio' name="6" checked='checked' onclick='basculeOrange(this)'  value="1" /> ?
<br /> <input type='radio' name="6" checked='checked' onclick='basculeOrange(this)'  value="2" /> ?
<br /> <input type='radio' name="6" checked='checked' onclick='basculeOrange(this)'  value="3" /> ?
<br /> <input type='radio' name="6" checked='checked' onclick='basculeOrange(this)'  value="4" /> ?
<br /> 
 
</blockquote>
<blockquote><span class="orange"><u>Question 8</u> : ?</span><br /><br />
<input type='radio' name="7" checked='checked' onclick='basculeOrange(this)'  value="1" /> ?<br /> 
<input type='radio' name="7" checked='checked' onclick='basculeOrange(this)'  value="2" /> ?<br /> 
<input type='radio' name="7" checked='checked' onclick='basculeOrange(this)'  value="3" /> ?<br /> 
<input type='radio' name="7" checked='checked' onclick='basculeOrange(this)'  value="4" /> ?<br />
 
 </blockquote>
<blockquote><span class="orange"><u>Question 9</u> : ?</span><br /><br /><input type='radio' name="8" checked='checked' onclick='basculeOrange(this)'  value="1" /> ?
<br /> <input type='radio' name="8" checked='checked' onclick='basculeOrange(this)'  value="2" /> ?
<br /> <input type='radio' name="8" checked='checked' onclick='basculeOrange(this)'  value="3" /> ?
<br /> <input type='radio' name="8" checked='checked' onclick='basculeOrange(this)'  value="4" /> ?
<br /> </blockquote><blockquote><span class="orange"><u>Question 10</u> : ?</span>
 
<br /><br /><input type='radio' name="9" checked='checked' onclick='basculeOrange(this)'  value="1" /> ?
<br /> <input type='radio' name="9" checked='checked' onclick='basculeOrange(this)'  value="2" /> ?
<br /> <input type='radio' name="9" checked='checked' onclick='basculeOrange(this)'  value="3" /> ?
<br /> <input type='radio' name="9" checked='checked' onclick='basculeOrange(this)'  value="4" /> ?
<br /> </blockquote><input type='hidden' name='result' value='voir' /><br />
 
<center><input  type='image' src=image/boutonvalider.gif  value='VALIDER' />
</body>
</html>

**fado59** · 10/06/2010, 19h40

Donc si quelqu'un voit le soucis, je vais manger je revois ça ce soir. En espérant trouver car je dois avoir finit sa demain

**vermine** · 10/06/2010, 19h43

Pourquoi vous ne rajoutez pas des span autour de vos valeurs ?

Code :

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

<span class="orange">Ordinateur</span>

C'est-à-dire dans la boucle qui fait les questions.

Ou mieux, d'englober toutes la question (réponses y compris) dans le span ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
for ($i=0; $i<count($quizz); $i++) {
      print '<blockquote><span class="orange">';
      print $quizz[$i][0];
      print '<br /><br />';
 
      for ($j=1; $j<count($quizz[$i])-2; $j++) {
        $question=$quizz[$i][$j];
        print "<input type='radio' name=\"$i\" checked='checked' value=\"$j\" /> $question<br /> "; // Bouton radio, dernier coché par défaut
      } 
      print "</span></blockquote>";

**fado59** · 10/06/2010, 20h13

ok ok mais quand je fais sa le mot ordinateur est direct en orange, je veux qu'il soit orange quand je coche le bouton radio.

J'ai du mal le faire peut etre, si tu peux me transmettre le code complet car avec tout ces changements c'est le vrai bordel

**fado59** · 10/06/2010, 20h58

Pour toi sa fonctionne? Si tu peux me dire le code complet par ce que sa fonctionne pas chez moi.

Si quelqu'un peut me dire si cette méthode fonctionne ?

**fado59** · 11/06/2010, 00h28

Sa marche ta méthode avec span mais le texte est diretement orange à l'ouverture de la page, alors que moi je veux que le texte soit orange au moment de la coche du bouton radio.

Si quelqu'un peut m'aider svp, je dois finir sa pour demain après midi

**E.Bzz** · 11/06/2010, 09h27

Envoyé par fado59

EDIT : je ne vois pas deux sections head, je suis aveugle?

Code :

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

1
2
3
</head>
<body background=image/imagefond.jpg>                                    
  <head>

**fado59** · 11/06/2010, 09h35

ok ok mais j'ai régler le soucis sa marche sauf que un seule réponse se met en orange si je passe à une autre question, elle se remet en noir et la nouvelle case coché se met en orange.

Une idée ?

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
 
<html>
<head>
  <title>Quiz Info De Base</title>
  <style>
    body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      background-color: #ffffff;
	  background-attachment : fixed;
      font-size: 11px;
    }
 
    .orange {
      color: #ff6600;
      font-weight: bold;
	}
 
  </style>
</head>
<body background=image/imagefond.jpg>                                    
  <html>
<head>
<script type="text/javascript">
function basculeOrange(elem) {
   var spans = document.getElementsByTagName('SPAN');
 
   for (var i = 0; i < spans.length; i++) {
      if (spans[i].className.indexOf('orange') > -1) { spans[i].className = ""; }
      if (spans[i] == elem) { elem.className = 'orange'; }
   }
 
}
</script>
</head>
<body>
<input onclick='history.go(-1)'  type='image' name='image' value='Retour' src='image/boutonretour.gif'/><center><FONT face="French Script MT" size="50" >Initiation : Info De Base</FONT></center><br><center><FONT face="French Script MT" size="5" ><b>Avant de commencer le Quiz, merci de remplir les champs Nom et Prénom</b></FONT></center><br><center><FONT face="French Script MT" size="5" ><b>Vérifiez bien que vous avez répondu à toutes les questions puis valider</b></FONT></center><br><center><FONT face="French Script MT" size="5" ><b>Attention : Toutes les questions ont une réponse cochée par défaut.</b></FONT></center><br><center><FONT face="French Script MT" size="5" ><b>Ce nest pas obligatoirement la bonne réponse.</b></FONT></center><br><center><FONT face="French Script MT" size="5" ><b>1 seule réponse par question est possible.</b></FONT></center><br><center><FONT face="French Script MT" size="5" ><b>Bonne Chance.</b></FONT></center><br><form id="form1" action="/infodebase.php" method='post'><b> Votre Nom :</b>   <input type=text name="nom"><b> Votre Prénom :</b> <input type=text name="prenom"><br><br><blockquote><span class="orange"><u>Question 1</u> : Quel dossier est spécialement prévu pour vous permettre de stocker vos données personnelles ?</span><br /><br /><span><input type='radio' name="0" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> Ordinateur</span><br /> <span><input type='radio' name="0" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> Documents</span><br /> <span><input type='radio' name="0" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> Corbeille</span><br /> </blockquote><blockquote><span class="orange"><u>Question 2</u> : Quelle est la version la plus récente de Windows ?</span><br /><br /><span><input type='radio' name="1" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> XP</span><br /> <span><input type='radio' name="1" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> Millenium</span><br /> <span><input type='radio' name="1" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> Seven (7)</span><br /> <span><input type='radio' name="1" checked='checked' onclick='basculeOrange(this.parentNode)'  value="4" /> 98</span><br /> <span><input type='radio' name="1" checked='checked' onclick='basculeOrange(this.parentNode)'  value="5" /> Vista</span><br /> </blockquote><blockquote><span class="orange"><u>Question 3</u> : Parmi ces unités de mesure, quelle valeur est la plus importante ?</span><br /><br /><span><input type='radio' name="2" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> Mega-Octet</span><br /> <span><input type='radio' name="2" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> Kilo-Octet</span><br /> <span><input type='radio' name="2" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> Giga-Octet</span><br /> </blockquote><blockquote><span class="orange"><u>Question 4</u> : Parmi ces supports de stockage, lequel a disparu ?</span><br /><br /><span><input type='radio' name="3" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> La clef USB</span><br /> <span><input type='radio' name="3" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> La disquette</span><br /> <span><input type='radio' name="3" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> Le CD-ROM</span><br /> </blockquote><blockquote><span class="orange"><u>Question 5</u> : Que trouve t-on dans la colonne de gauche du menu DEMARRER</span><br /><br /><span><input type='radio' name="4" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> La météo</span><br /> <span><input type='radio' name="4" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> Vos documents</span><br /> <span><input type='radio' name="4" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> Vos programmes</span><br /> </blockquote><blockquote><span class="orange"><u>Question 6</u> : ?</span><br /><br /><span><input type='radio' name="5" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> ?</span><br /> <span><input type='radio' name="5" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> ?</span><br /> <span><input type='radio' name="5" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> ?</span><br /> <span><input type='radio' name="5" checked='checked' onclick='basculeOrange(this.parentNode)'  value="4" /> ?</span><br /> </blockquote><blockquote><span class="orange"><u>Question 7</u> : ?</span><br /><br /><span><input type='radio' name="6" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> ?</span><br /> <span><input type='radio' name="6" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> ?</span><br /> <span><input type='radio' name="6" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> ?</span><br /> <span><input type='radio' name="6" checked='checked' onclick='basculeOrange(this.parentNode)'  value="4" /> ?</span><br /> </blockquote><blockquote><span class="orange"><u>Question 8</u> : ?</span><br /><br /><span><input type='radio' name="7" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> ?</span><br /> <span><input type='radio' name="7" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> ?</span><br /> <span><input type='radio' name="7" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> ?</span><br /> <span><input type='radio' name="7" checked='checked' onclick='basculeOrange(this.parentNode)'  value="4" /> ?</span><br /> </blockquote><blockquote><span class="orange"><u>Question 9</u> : ?</span><br /><br /><span><input type='radio' name="8" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> ?</span><br /> <span><input type='radio' name="8" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> ?</span><br /> <span><input type='radio' name="8" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> ?</span><br /> <span><input type='radio' name="8" checked='checked' onclick='basculeOrange(this.parentNode)'  value="4" /> ?</span><br /> </blockquote><blockquote><span class="orange"><u>Question 10</u> : ?</span><br /><br /><span><input type='radio' name="9" checked='checked' onclick='basculeOrange(this.parentNode)'  value="1" /> ?</span><br /> <span><input type='radio' name="9" checked='checked' onclick='basculeOrange(this.parentNode)'  value="2" /> ?</span><br /> <span><input type='radio' name="9" checked='checked' onclick='basculeOrange(this.parentNode)'  value="3" /> ?</span><br /> <span><input type='radio' name="9" checked='checked' onclick='basculeOrange(this.parentNode)'  value="4" /> ?</span><br /> </blockquote><input type='hidden' name='result' value='voir' /><br />
 
<center><input  type='image' src=image/boutonvalider.gif  value='VALIDER' /><body>
</html>
</body>
</html>

bouton radio couleur

JavaScript

Discussions similaires

Partager

Partager