11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème javascript : classe non appliquée

Bonjour à tous,

J'ai un problème avec le javascript suivant, à priori simple Smiley confused 

<script language="JavaScript" type="text/javascript">
function voirBlabla(identifiant,idbrique){
	/* on met les autres liens a "off" */
	var contener = document.getElementById("liste_tabs_"+idbrique)
	var listeLi = contener.getElementsByTagName("div");	
	for (var i = 0; i < listeLi.length -1 ; i = i+1)
	{	
		if(listeLi[i].id == identifiant)
		{			
		listeLi[i].className = "onglet-on";					
		}
		else
		{			
		if (listeLi[i].className != "separ")
		    listeLi[i].className = "onglet-off";						
		}	
	}
	/* on masque les autres contenus */
	var listeLi2 = document.getElementById("blablas_"+idbrique).getElementsByTagName("div");	
	for (var i = 0; i < listeLi2.length; i++){
		if(listeLi2[i].id.indexOf('content_CAT_') != -1)
			listeLi2[i].style.display = "none";
	}	
	/* on affiche le contenu */
	document.getElementById("content_"+identifiant).style.display = "block";
}
</script>


Code HTML associé :
<div id="onglets">
	<div id="liste_tabs_1">
		<!-- ONGLET SELECTED -->
		<div id="CAT_1_1" class="onglet-on"> <a style="cursor:pointer;" onclick="voirBlabla('CAT_1_1','1'); return false;">VISION</a> </div>
		<!-- ONGLET SIMPLE -->
		<div id="CAT_2_1" class="onglet-off"> <a style="cursor:pointer;"  onclick="voirBlabla('CAT_2_1','1'); return false;">VALUES</a> </div>
		<!-- ONGLET SIMPLE -->
		<div id="CAT_3_1" class="onglet-off"> <a style="cursor:pointer;"  onclick="voirBlabla('CAT_3_1','1'); return false;">ENVIRONMENT</a> </div>
		<!-- ONGLET SIMPLE -->
		<div id="CAT_4_1" class="onglet-off"> <a style="cursor:pointer;"  onclick="voirBlabla('CAT_4_1','1'); return false;">OPPORTUNITIES</a> </div>
		<!-- ONGLET SIMPLE -->
		<div id="CAT_5_1" class="onglet-off"> <a style="cursor:pointer;"  onclick="voirBlabla('CAT_5_1','1'); return false;">INNOVATION</a> </div>
	</div>
</div>


Un clic sur chacun des liens affiche un bloc caché avec son contenu et change la classe du lien à la volée.
Problème : pour le dernier lien, <div id="CAT_5_1" class="onglet-off"> , la classe ne passe pas à onglet-on.
Si j'ajoute, dans le code et à la main, ce qui bien sûr ne sera pas possible dans l'application, un sixième lien, la classe ne change pas, alors qu'elle change bien pour le 5ème.

Pourquoi ce js ne peut-il pas changer la classe au dernier lien ?
Merci.

Edit : désolé pour le texte en italique, on dirait que les cités dans le javascript sont interprétés Smiley confus [/i][/i][/i][/i][/i][/i]
Modifié par Ericf (23 Apr 2009 - 21:20)
Merci à toi.

En fait, j'aurais du copier le code complet de la page, afin qu'on puise directement voir le (dis)fonctionnement du script.
Le voici :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE></TITLE>
</head>
<body>
<style type="text/css">
.onglet-on { color: #f00; }
</style>
<script language="JavaScript" type="text/javascript">
function voirBlabla(identifiant,idbrique){
	/* on met les autres liens a "off" */
	var contener = document.getElementById("liste_tabs_"+idbrique)
	var listeLi = contener.getElementsByTagName("div");	
	for (var i = 0; i < listeLi.length -1 ; i = i+1)
	{	
		if(listeLi[i].id == identifiant)
		{			
		listeLi[i].className = "onglet-on";					
		}
		else
		{			
		if (listeLi[i].className != "separ")
		    listeLi[i].className = "onglet-off";						
		}	
	}
	/* on masque les autres contenus */
	var listeLi2 = document.getElementById("blablas_"+idbrique).getElementsByTagName("div");	
	for (var i = 0; i < listeLi2.length; i++){
		if(listeLi2[i].id.indexOf('content_CAT_') != -1)
			listeLi2[i].style.display = "none";
	}	
	/* on affiche le contenu */
	document.getElementById("content_"+identifiant).style.display = "block";
}
</script>
<div id="onglets">
	<div id="liste_tabs_1">
		<!-- ONGLET SELECTED -->
		<div id="CAT_1_1" class="onglet-on"> <a style="cursor:pointer;" onclick="voirBlabla('CAT_1_1','1'); return false;">VISION</a> </div>
		<!-- ONGLET SIMPLE -->
		<div id="CAT_2_1" class="onglet-off"> <a style="cursor:pointer;"  onclick="voirBlabla('CAT_2_1','1'); return false;">VALUES</a> </div>
		<!-- ONGLET SIMPLE -->
		<div id="CAT_3_1" class="onglet-off"> <a style="cursor:pointer;"  onclick="voirBlabla('CAT_3_1','1'); return false;">ENVIRONMENT</a> </div>
		<!-- ONGLET SIMPLE -->
		<div id="CAT_4_1" class="onglet-off"> <a style="cursor:pointer;"  onclick="voirBlabla('CAT_4_1','1'); return false;">OPPORTUNITIES</a> </div>
		<!-- ONGLET SIMPLE -->
		<div id="CAT_5_1" class="onglet-off"> <a style="cursor:pointer;"  onclick="voirBlabla('CAT_5_1','1'); return false;">INNOVATION</a> </div>
	</div>
</div>
</body>
</html>


Merci.[/i][/i][/i][/i][/i][/i]
Hello,

J'ai regardé très rapidement, mais j'ai l'impression qu'il y a une coquille dans ta boucle:
for (var i = 0; i < listeLi.length -1 ; i = i+1)

Si tu souhaite traiter tous les éléments de la liste, il faut enlever le "-1"...:
for (var i = 0; i < listeLi.length ; i = i+1)

Smiley cligne
Merci jiber2fr, c'est bien ça !
Ca me donne des pistes pour corriger d'autres bugs (le javascript n'est pas ma tasse de thé, et on vient de me donner un site à mettre à jour plein de petites erreurs de ce type).
Sujet clos
Aller à