[DOM] getElementById + innerHTML avec IE

**polemoss** · 09/01/2008, 17h21

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 :

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&egrave;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&egrave;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&eacute;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&eacute;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&egrave;re</a></li>
        </span>
        <li></li>
 
    </ul>
</div>
<form name="save" style="display:inline;">
<input type="text" id="cacher" value='1' />
</form>
 
</body>
</html>

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" : ...
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

**SpaceFrog** · 10/01/2008, 08h56

il est fortement déconseillé d'avoir des id numériques ...
mais bon

ensuite faire un menu avec des li en innerHTML

passe plutot par le DOM avec document.createElemetn('li') ...

**polemoss** · 10/01/2008, 09h20

Merci de ta réponse,

Je vais voir comment ça marche document.createElemetn('li'), car je ne connais pas. Je vais remplacer les id numérique dans ce cas.

Je vous tiens au courant

**SpaceFrog** · 10/01/2008, 09h42

arf...

Code :

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

document.createElement('li')

désolé pour la faute de frappe

**polemoss** · 10/01/2008, 10h25

J'avais vu t'inquiète par contre j'ai une erreur je te remet pas tout mon code voici le case 'en1' :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
case "en1" :
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.setAttribute('id', 'actif');
    a.setAttribute('onclick', 'active("en1")');
    a.onclick = active("en1");
    var aT = document.createTextNode('Famille');
    a.appendChild(aT);
    var li = document.createElement('li');
    li.appendChild(a);
    var span = document.getElementById('en1');
    span.appendChild(li);
    break;

J'ai le message d'erreur suivant too much recursion à cause de la ligne

Code :

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

1
2
 
a.onclick = active("en1");

que je doit mettre pour la compatibilité ie je comprends pas parce qu'apparemment c'est bien comme ça que l'on doit écrire pour ie

**SpaceFrog** · 10/01/2008, 10h34

remplace:

Code :

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

1
2
  a.setAttribute('onclick', 'active("en1")');
    a.onclick = active("en1");

par :

Code :

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

     a.onclick = function(){active("en1");}

[DOM] getElementById + innerHTML avec IE

JavaScript

Vue hybride

Discussions similaires

Partager

Partager