Javascript et ClassName

Version imprimable

Bonjour,

Je rencontre un problème concernant la propriété className de javascript.
Je m'explique, je souhaite changer la classe d'une série de div contenu dans un autre au passage de la souris, j'ai utilisé le même code auparavant sur un onclick qui fonctionne très bien, je ne comprend pas pourquoi il ne marche pas ce coup ci, voici le code en question :
Code:

1 2 3 4 5 6 7 8 obj=document.getElementById('menu_niveau_3_'+nom); var divs = obj.getElementsByTagName('div'); for(var i=0; i<divs.length; i++) if(divs[i].className=='niveau3') { divs[i].className="niveau3_visible"; }
Merci par avance de vos réponses.

Parce que les instructions relatives à une boucle for se mettent entre accolades :roll:
Code:

1 2 3 4 5 for(var i=0; i<divs.length; i++){ if(divs[i].className=='niveau3'){ divs[i].className="niveau3_visible"; } }

31/08/2010, 12h19
vermine

Je crains que non, Bovino. Ce genre de syntaxe fonctionne, le if étant considéré comme une seule instruction. :aie:
31/08/2010, 13h26
Sebastien14

Merci pour vos réponses, oui en effet le if est considéré comme une seul instruction, j'ai exactement le même code à un autre endroit qui fonctionne.
En faite j'ai plus l'impression que ces un problème de rafraichissement, j'utilise ce code pour un menu lorsque j'affiche le sous menu rien ne se passe, si par contre j'affiche un autre sous menu et que je reviens afficher le sous menu precedent, le changement de classe est pris en compte.
31/08/2010, 13h46
SpaceFrog

tu es sur que le css est chargé (path ou casse) ...
31/08/2010, 13h52
Sebastien14

Merci pour ta réponse.
Et bien oui, les autres classes de mon fichiers css que j'utilise sont appliquées à d'autre éléments div, et cela fonctionne bien.

en soi le principe fonctionne

Code:

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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
function bar(){
	var lis=document.getElementById('foo').getElementsByTagName('li')
	var i=-1;
	while(lis[++i]){
	  lis[i].className=(i & 1)?'toc':'tic';
	  }
	}
</script>
<style type="text/css">
.toc {background-color:red;}
.tic {background-color:green;}
</style>
</head>
 
<body>
<ul id='foo'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input type='button' onclick='bar()' value='go' />
 
</body>
 
</html>

tu as donc un souci de chargement du css

31/08/2010, 14h22
Sebastien14

J'aurai un problème de chargement du css? Dans mon menu les div concerné ont déjà une classe attribué, cela fonctionne bien, c'est le changement qui ne se fait pas.
31/08/2010, 15h04
Sebastien14

Je ne vois pas comment résoudre ce problème de chargement de css, une idée?
31/08/2010, 15h07
SpaceFrog

commence par tester des trucs tout simples ...
le css est externe ?
31/08/2010, 15h10
Sebastien14

Oui j'appel mon fichier css dans ma page html.
31/08/2010, 15h11
SpaceFrog

et le style de base est dans le css externe ?
31/08/2010, 15h12
Sebastien14

Oui aussi. Merci de prendre du temps pour essayer de résoudre mon problème
31/08/2010, 15h14
SpaceFrog

la seule autre possibilité est que ton pointeur

Code:

obj=document.getElementById('menu_niveau_3_'+nom);

ne pointe pas sur le bon element ...
31/08/2010, 15h14
andry.aime

Citation:

obj=document.getElementById('menu_niveau_3_'+nom);

L'élément existe?
faits un alert pour voir s'il existe et s'il a les div fils que tu cherches.
31/08/2010, 15h18
Sebastien14

Lorsque je rajoue un alert dans ma boucle :

Code:

alert(divs[i].className);

Il me renvoie bien la bonne classe, il trouve donc les éléments.
31/08/2010, 15h24
SpaceFrog

c'est que ton fichier css comporte une erreur de syntaxe avant la declaration de la classe .niveau3_visible
31/08/2010, 15h29
Sebastien14

Dans ce cas lorsque je clique sur un autre menu pour afficher un autre sous menu et que je reviens pour afficher le sous menu posant problème, la classe ne devrait pas s'appliquer non?
31/08/2010, 15h34
andry.aime

Peut-on voir ton code HTML?
31/08/2010, 15h35
SpaceFrog

pour moi le souci vient de ton fichier css soit une erreur de syntaxe ou de pointeur de classe ...
si tu nous montrais ton css ?

Voici mon code css :
Code:

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 .niveau3,.niveau3 a{ float:bottom; visibility:hidden; } .niveau3 a:hover{ background-color:purple; } .niveau3_visible,.niveau3_visible a{ background-color:red; font-size:2.5em; float:bottom; visibility:visible; } .niveau3_visible a:link,.niveau3_visible a:visited,.niveau3_visible a:hover,.niveau3_visible a:active{ background-color:red; width:150px; } .niveau3_visible a:hover { color: white; font-weight: bold; } .niveau_3_visible:hover{ border:solid black 1px; visibility:visible; }
Pour le html je développe sous un cms, Ovidentia, c'est un menu dynamique que je souhaite afficher, ce menu peut être modifier par l'utilisateur à tous moment. Je le charge via un fichier Ovml(language propre à Ovidentia il me semble)

31/08/2010, 16h15
Sebastien14

Merci pour votre aide. J'ai résolu mon problème en faisant autrement.

Bonne fin de journée à tous