Bonjour,
J'ai fais une fonction en JavaScript qui permet de changer la couleur d'un menu, donc elle marche parfaitement bien avec Firefox mais elle ne marche pas avec Internet Explorer.
Je pense que le problème vient des getElementById et des innerHTML mais je n'en suis pas sur, car ie me met comme message d'erreur :"Erreur d'execution inconnue, code 0 puis il me dit la ligne et le caractère (89 / 2), cette ligne correspondant justement au getElementById et innerHTML, après plusieurs test et quelque cheveux en moins je ne trouve pas donc je vous demande votre aide svp.
Vous pouvez aller voir le menu à cette adresse : http://polemoss.free.fr/test/ bien sur ne testez pas qu'avec firefox sinon vous allez me dire qu'il y a pas de problème
Voici le code complet :
J'anticipe une question pourquoi il y a t'il un switch ou les case sont du type case 1 : ... et d'autre case "1" : ...
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212 <html> <head> <script type="text/javascript" language="javascript1.5"> function active(id){ var menu = ""; switch(id){ case 1 : menu = '<li><a id="actif" href="#" onClick="active(1)">Familles</a></li>'; //alert('ok'); break; case 2 : menu = '<li><a id="actif" href="#" onClick="active(2)">Catégories</a></li>'; break; case 3 : menu = '<li><a id="actif" href="#" onClick="active(3)">Voitures</a></li>'; break; case 4 : menu = '<li><a id="actif" href="#" onClick="active(4)">Saisons</a></li>'; break; case 5 : menu = '<li><a id="actif" href="#" onClick="active(5)">Durée</a></li>'; break; case 6 : menu = '<li><a id="actif" href="#" onClick="active(6)">Tarifs</a></li>'; break; case 7 : menu = '<li><a id="actif" href="#" onClick="active(7)">Options</a></li>'; break; case 8 : menu = '<li><a id="actif" href="#" onClick="active(8)">Assurances</a></li>'; break; case 9 : menu = '<li><a id="actif" href="#" onClick="active(9)">Tarif-Options</a></li>'; break; case 10 : menu = '<li><a id="actif" href="#" onClick="active(10)">Tarif-Assurances</a></li>'; break; case 11 : menu = '<li><a id="actif" href="#" onClick="active(11)">Taxe-Aero.</a></li>'; break; case 12 : menu = '<li><a id="actif" href="#" onClick="active(12)">Bannière</a></li>'; break; } var prev = document.getElementById("cacher").value; //alert("id = "+id+"\nprev = "+prev); document.getElementById("cacher").value = id; if(prev != id) { switch(prev){ case "1" : menuP = '<li><a class="norm" href="#" onClick="active(1)">Familles</a></li>'; break; case "2" : menuP = '<li><a class="norm" href="#" onClick="active(2)">Catégories</a></li>'; break; case "3" : menuP = '<li><a class="norm" href="#" onClick="active(3)">Voitures</a></li>'; break; case "4" : menuP = '<li><a class="norm" href="#" onClick="active(4)">Saisons</a></li>'; break; case "5" : menuP = '<li><a class="norm" href="#" onClick="active(5)">Durée</a></li>'; break; case "6" : menuP = '<li><a class="norm" href="#" onClick="active(6)">Tarifs</a></li>'; break; case "7" : menuP = '<li><a class="norm" href="#" onClick="active(7)">Options</a></li>'; break; case "8" : menuP = '<li><a class="norm" href="#" onClick="active(8)">Assurances</a></li>'; break; case "9" : menuP = '<li><a class="norm" href="#" onClick="active(9)">Tarif-Options</a></li>'; break; case "10" : menuP = '<li><a class="norm" href="#" onClick="active(10)">Tarif-Assurances</a></li>'; break; case "11" : menuP = '<li><a class="norm" href="#" onClick="active(11)">Taxe-Aero.</a></li>'; break; case "12" : menuP = '<li><a class="norm" href="#" onClick="active(12)">Bannière</a></li>'; break; } //alert(id); objA=document.getElementById(id); objA.innerHTML=menu; objP=document.getElementById(prev); objP.innerHTML=menuP; } } </script> <style media="all" type="text/css"> body{ margin:0px; padding:0px; } #menu { width:127px; /*height:100px;*/ text-align:left; position:absolute; left:0px; top:0px; background-color:#00CC66; } #menu ul{ padding-left:0px; list-style:none; padding-right:0px; position:absolute; top:32px; left:0px; width:127px; padding:0px; margin:0px; } #menu li { border-top:solid 1px #000000; padding:0px; margin:0px; } .norm{ display:block; color:#FFFFFF; width:127px; font-family:"Trebuchet MS"; font-size:16px; text-decoration:none; background-image:url(images/puce.jpg); background-position:left center; background-repeat:no-repeat; text-indent:12px; text-align:left; } .norm:hover { background-color:#677BAD; background-image:url(images/pucehover.jpg); background-position:left center; background-repeat:no-repeat; text-indent:12px; } #actif{ display:block; color:#FFFFFF; width:127px; font-family:"Trebuchet MS"; font-size:16px; text-decoration:none; background-color:#677BAD; background-image:url(images/pucehover.jpg); background-position:left center; background-repeat:no-repeat; text-indent:12px; } </style> </head> <body bgcolor="#21396B"> <div id="menu"> <ul> <span id="1"> <li><a id="actif" href="#" onClick="active(1)">Familles</a></li> </span> <span id="2"> <li><a class="norm" href="#" onClick="active(2)">Catégories</a></li> </span> <span id="3"> <li><a class="norm" href="#" onClick="active(3)">Voitures</a></li> </span> <span id="4"> <li><a class="norm" href="#" onClick="active(4)">Saisons</a></li> </span> <span id="5"> <li><a class="norm" href="#" onClick="active(5)">Durée</a></li> </span> <span id="6"> <li><a class="norm" href="#" onClick="active(6)">Tarifs</a></li> </span> <span id="7"> <li><a class="norm" href="#" onClick="active(7)">Options</a></li> </span> <span id="8"> <li><a class="norm" href="#" onClick="active(8)">Assurances</a></li> </span> <span id="9"> <li><a class="norm" href="#" onClick="active(9)">Tarif-Options</a></li> </span> <span id="10"> <li><a class="norm" href="#" onClick="active(10)">Tarif-Assurances</a></li> </span> <span id="11"> <li><a class="norm" href="#" onClick="active(11)">Taxe-Aero.</a></li> </span> <span id="12"> <li><a class="norm" href="#" onClick="active(12)">Bannière</a></li> </span> <li></li> </ul> </div> <form name="save" style="display:inline;"> <input type="text" id="cacher" value='1' /> </form> </body> </html>
Tous simplement parce que dans le cas ou y'a pas les guillemets l'id est comprit comme une valeur numérique et dans le cas ou il y a des guillemets l'id est comprit comme une chaine de caractère voilà pourquoi, mais et je ne pense pas que l'erreur vienne de là.
Je vous joint également le fichier html complet ça serra certainement plus pratique.
Merci d'avance
A bientôt
Antoine
Partager