Discussion :

[aertys]

bonjour,

j'ai crée sur mon site web une fonction javascript pour changer la couleur des liens. au moment où je teste la fonction je me suis assurée avec un console.log qu'il entrait bien dans celle-ci. Mais il bloque au moment d'entrer dans ma boucle "for" :

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function changeColor (element,couleur) {
     console.log('chorale');
 
         var theAs =  document.querySelectorAll('nav a');
         for (var i = 0 ; i < theAs.length; i++) {
          console.log('cuicui');
               theAs [i].style.color = 'black';
               if (i === element) {
               console.log('soleil');
                    theAs [i].style.color = couleur;    
               }
          }
 
     }

où est l'erreur ?

merci de votre aide

[danielhagnoul]

Que donne un console.log( theAs, theAs.length ) ?

Sans vos codes (CSS, HTML et JS) il est impossible de tester quoi que ce soit !

[eleydet]

Bonsoir,

Je suis étonné de voir, aux lignes 7 et 10, cet espace entre theAs et [i]. Cet espace est-il autorisé? Pour ma part, c'est la première fois que je le rencontre.
Sinon, la fonction est correcte.
Avez-vous testé :

Code :

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

1
2
var theAs =  document.querySelectorAll('nav a');
console.log(theAs.length;);

[aertys]

voici

Code css :

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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
 
.bold{
     font-weight: bold;
}
.goldenrod {
          font-family: Calibri;
          text-shadow:  2px 2px #FF6347;
          color: #FF6347;
          }
footer q {
     text-align: left;
     font-size: 0.8em;
     display: block;
}
#t1 tr:first-child th, #t2 tr:first-child th {
     width: 39%;
     height:39%;
}
#t2 {
     border-collapse: collapse;
     border: 1px black;
     border-style: dotted;
     font-size: 1.2em;
}
#t1 {
     border-collapse: collapse;
     border: 1px blue ;
     border-style:solid;
     font-size: 1.2em;
}
#t2 th,#t2 td {
     text-align: center;
     border-collapse: collapse;
     border: 1px black;
     border-style: dotted;
     width: 13%;
     height: 13%;
     margin:0 auto;
}
#t1 th {
     text-align: center;
     border-collapse: collapse;
     border: 1px blue;
     border-style: solid;
     width: 11%;
     height: 13%;
     margin:0 auto;
}   
 #t1 td {
     text-align: center;
     border-collapse: collapse;
     border: 1px blue;
     border-style: solid;
     width: 50%;
     height: 13%;
     margin:0 auto;
} 
#t1 tr {
     padding-bottom: 1em;
}      
nav {
     font: 2em bold;
     width:80%;
     margin: 0 auto;
 
} 
nav a:hover {
    color: red;
} 
#logo, #titrePrincipal {
     display: inline-block;
}
#titrePrincipal {
     width: 6000px;
     text-align: center;
     margin:0 auto;
}
#text {
     font: 2em underline;
}
#mylogo {
     position: absolute;
     top: 5%;
     left: 5%;
     vertical-align: top;
}
i,.second li{
     display: inline-block;
}
 i {
  border: solid black;
  border-width: 0 3px 3px 0;
  padding: 3px;
}
 
.right {
    margin-right: 10px;
    list-style-type: square;
}
html,body {
	height: 100%;
	width: 100%;
}
section {
	margin: 0 auto;
	width: 95%; 
	text-align: center;
	border: 5px black;
	border-style: solid;
	/*height: 65%;*/
}
#carte, article {
     vertical-align: top;
	display: inline-block;
	margin: 0 auto;
	font-size: 1.5em;
}
aside {
	height: 70%;
	border: 1px black solid;
}
header {
	margin: 0 auto;
	border: 1px black solid;
	height: 30%;
	width: 95%;
}
.formLang {
	position: absolute;
	top: 5%;
	right: 5%;
}
article {
      width: 80%;
      position:relative;
      bottom: 2.2em; 
      left: 11em;
}
aside {
	background-color: #ff9933;
     width: 40%;	
}
h1 {
     font-size: 3em;
}
h2 {
	font-size: 2em;
}
h2,h1 {
	text-align: center;
	text-decoration: underline;
}
h3 {
	font-size: 1.5em;
}
.bold {
	font-weight: bold;
}
q {
	font-size: 1.1em;
	font-style: italic;
}
.ent:hover,.pro:hover,.cli:hover,.tem:hover,.mar:hover {
     color: red;
}
.a2c,.pro,.cli,.tem,.mar {
	margin-left: 48px;
}
.ent,nav a:first-child { 
	margin-left: 1em;
}
.maj {
	text-transform: uppercase;
}
.second li {
	list-style-type: square;
}
.right:after {
     content: "";	
}
/*#up {
	position: relative;
	bottom: 600px;
}*/
h1,h2,nav a {
     font-family: 'Arial','Serif';
}
body {
 
}
#mar_g,#mar_l {
     margin: 0 auto;
     width: 22%;
	  display: inline-block;
	  vertical-align: middle;
}
#mar_l {
 
}
#mar_g {
 
}
#mapid {
     margin: 0 auto;	
     vertical-align: middle;
     width: 20%;
     height : 20%;
     border:1px black;
     border-style: solid;
}
body {
     font-size: 2.8em;
}
#mar_l li:focus {
	font-weight: bold;
}
header,section {
    padding: 2%;
}
.italic {
	font-style: italic;
}
footer a{
     color: blue;
     text-decoration: underline;
}

Code html :

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

1
2
3
4
5
6
7
8
9
 
			<nav>
			<span class="ent"><span class="maj">n</span>otre <span class="maj">e</span>ntreprise</span>
				<span class="pro"><span class="maj">n</span>os <span class="maj">p</span>roduits</span>
				<span class="cli"><span class="maj">n</span>otre <span class="maj">c</span>lient&egrave;le</span>
				<span class="mar"><span class="maj">n</span>os <span class="maj">m</span>arch&eacute;s</span>
				<span class="tem"><span class="maj">t</span>&eacute;moignages</span>
			</nav>
		</header>

Et le JS, vous l'avez déjà.

[ProgElecT]

Salut

Et avec tous tes codes, dans lequel fais tu appel à la fonction changeColor

[danielhagnoul]

var theAs = document.querySelectorAll('nav a'); mais dans votre code HTML, il n'y a aucun lien a dans nav !

[aertys]

un grand merci à tous.

c'était en effet un pb de "a" que je prenais pour des span.