Forums des Zéros

25 avril 2009 à 16:29:53

Bonjour, j'essaye de faire un menu mais je n'y arrive pas du tout, je ne sais pas ou sont les erreurs dans mon code, j'aurais besoin qu'on corrige juste ce qui ne va pas dedans. On m'a déjà refait un code mais pas tout à fait similaire donc je l'ai compris mais je suis incapable de faire un code de ce type moi-même, le but est donc juste de modifier mes erreurs pour que je comprenne le problème.

Voici le html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" href="javascript.css"/>
	    
		<script type="text/javascript" src="jquery-1.3.2.js"></script>
		<script type="text/javascript" src="javascript.js"></script>  
		
	</head>
	<body>
		<div class="menu">
			<ul>
				<li class="niveau1"><a href="#" class="n1a">JavaScript</a>
					<ul class="niveau2">
						<li><a href="#" class="n2a">Truk1</a></li>
						<li><a href="#" class="n2a">Truk2</a></li>
						<li><a href="#" class="n2a">Truk3</a></li>
					</ul>
				</li>
				<li class="niveau1"><a href="#" class="n1a">Graphic Design</a>
					<ul class="niveau2">
						<li><a href="#" class="n2a">Truk1</a></li>
						<li><a href="#" class="n2a">Truk2</a></li>
						<li><a href="#" class="n2a">Truk3</a></li>
					</ul>
				</li>
				<li class="niveau1"><a href="#" class="n1a">HTML</a>
					<ul class="niveau2">
						<li><a href="#" class="n2a">Truk1</a></li>
						<li><a href="#" class="n2a">Truk2</a></li>
						<li><a href="#" class="n2a">Truk3</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

Et ici le javascript:

function display(){
	var a = document.getElementsByTagName('a');
	var ul = document.getElementsByTagName('ul');
	
	for(var i = 0;i < a.length;i++){
	
		if(a[i].className == 'n1a'){
			a[i].onclick = function(){
				a[i].ul[0] = (a[i].ul[0].style.display == 'none')? 'inline' : 'none';
			};
		}
		
	}
}

windows.onload = display;

Merci d'avance.

25 avril 2009 à 18:29:48

C'est ta variable ul... elle contient les truc du cocument... pas de l'objet de la boucle...
Replaces ul par getElementsByTagName("ul") et vire la variable ul...

Et c'est javascript.. pas java...

26 avril 2009 à 12:30:07

Oui je sais c'est javascript je sais pas pourquoi j'ai mis ça lol
Et sinon

Citation : Pas de titre

elle contient les truc du cocument... pas de l'objet de la boucle...

C'est à dire?

26 avril 2009 à 12:34:36

Essayes ça :
Si ça marche, tu avait mal compris getElementsByTagName() et tu avais oublié un .style.display

function display(){
	var a = document.getElementsByTagName('a');
	
	for(var i = 0;i < a.length;i++){
	
		if(a[i].className == 'n1a'){
			a[i].onclick = function(){
				a[i].getElementsByTagName('ul')[0].style.display = (a[i].getElementsByTagName('ul')[0].style.display == 'none')? 'inline' : 'none';
			};
		}
		
	}
}

Et si ça marche, je te l'optimise (là tu récupère plusieurs fois avec getElementsByTagName('ul') alors qu'on pourrauit y mettre dans une variable...)

26 avril 2009 à 18:38:16

Yeah xavier ! C'est toujours mieux quand ça "amrche" !

26 avril 2009 à 19:57:00

Corrigé

26 avril 2009 à 20:32:39

Encore un effort ...

Citation : xavierm02

Et si ça amrche, je te l'optimise (là tu récupère plusieurs fois avec getElementsByTagName('ul') alors qu'on pourrauit y mettre dans une variable...)

26 avril 2009 à 20:35:31

Je dois avoir le cerveau mal cablé pour faire toujours la même...

27 avril 2009 à 9:29:22

Malheureusement ça ne marche pas plus que mon code...mais tu serais capable de voir ou j'ai fait une erreur dans mon code?
Aussi, en reregardant ton code j'ai vu que c'était le même que le mien à part que j'ai fait justement l'optimisation dont tu parlais "ul = document.getElementsByTagName('ul');"

27 avril 2009 à 13:36:45

Je pense pas que ton truc soit une optimisation...
Et moi, je parlais d'y faire dans la boucle.
Ton optimisation est mal faite... ou du moins d'après ce que j'ai compris du fonctionnement du javascript...

function display()
{
	var a = document.getElementsByTagName('a');

	for(var i = 0,l=a.length;i < l;i++)
	{
		if(a[i].className == 'n1a')
		{
			a[i].onclick =(function(lien)
				{
					return function()
					{
						lien.style.display = (lien.style.display == 'none')? 'inline' : 'none';
					}
				})(a[i].getElementsByTagName('ul')[0]);
		}
	}
}

J'ai essayé... mais ça ne marchera certainement pas... je connais pas encore bien les closures...

27 avril 2009 à 14:28:02

Je suis pas sûr que tu aies besoin des closures ici...

L'utilisation de this pourrait suffire...

this.getElementsByTagName("ul")[0].style.display = (this.getElementsByTagName("ul")[0].style.display == 'none')? 'inline' : 'none';

27 avril 2009 à 17:27:27

Ah oui...
Par contre, là, tu utilises deux fois la fonction getbn alors qu'un suffit :-°

27 avril 2009 à 17:36:56

Ah oui, c'est vrai, on parle d'optimisation

a[i].onclick = function() {
  var ul = this.getElementsByTagName("ul")[0];
  ul.style.display = (ul.style.display=="none") ? "inline" : "none";
};

27 avril 2009 à 20:04:01

Effectivement, le code plus haut ne fonctionne pas, ça va pas beaucoup m'aider si ça marche pas, des codes qui fonctionnent pas jles fais mieux que vous ^^...
Je suis extrêmement frustré avec le javascript parce qu'il n'y a aucun bon tutoriel complet et bien expliqué, celui du site du zéro est bien mais je l'ai fini et je ne sais rien faire d'intéressant avec. J'essaye donc de créer des truk à faire sur une page web comme des menus comme celui ci (simple) mais même ça, je n'arrive pas à le faire malgré des recherches et des questions sur un forum...help!!! :'(

27 avril 2009 à 20:28:20

Tiens, j'ai revu un peu ton JS

function gebcn(cl) { // Fonction getElementsByTagName pour tous les navigateurs
  if(document.getElementsByClassName) {
    return document.getElementsByClassName(cl);
  }else{
    var all = document.getElementsByTagName("*");
	var res = [];
	for(var i=0,l=all.length;i<l;i++) {
	  if(all[i].className==cl) {
	    res.push(all[i]);
	  }
	}
	return res;
  }
}

function display(){
  var a = gebcn("n1a"); // On récupère tous les class="n1a"
  for(var i=0,l=a.length;i<l;i++){ // Pour chacun d'entre eux
    a[i].onclick = function(){ // Lorsqu'on les clique
      var ul = this.parentNode.getElementsByTagName("ul")[0]; // On récupère l'ul (il faut passer par parentNode !!!)
	  ul.style.display = (ul.style.display == 'none')? 'inline' : 'none'; // Et on change le display
    };
  }
}

window.onload = display; // window sans "s" !

27 avril 2009 à 21:53:56

Ok, ça marche merci. Par contre ya un truk que j'ai pas compris:
"var ul = this.parentNode.getElementsByTagName("ul")[0];"
pourquoi on passe par le parentNode?

27 avril 2009 à 22:53:32

Regarde ton code HTML :

<li class="niveau1"><a href="#" class="n1a">JavaScript</a>
  <ul class="niveau2">
    <li><a href="#" class="n2a">Truk1</a></li>
    <li><a href="#" class="n2a">Truk2</a></li>
    <li><a href="#" class="n2a">Truk3</a></li>
  </ul>
</li>

On part du premier lien <a> et on veut en fait rejoindre le noeud <ul> suivant... Pour l'obtenir avec getElementsByTagName(), il faut bien se baser sur le noeud parent du <a>, c'est à dire le premier <li>.

On aurait aussi pu créer une fonction pour dénicher le noeud <ul> suivant avec des nextSibling().

T'as compris ?

(Si oui, pense aussi à mettre le sujet en résolu

)

28 avril 2009 à 12:29:49

J'ai peut être compris. Hote moi d'un doute

en fazit on cherche le noeud parent pour ensuite revenir sur un autre noeud enfant qui est le "ul", vrai?
Si c'est le cas, je pense avoir compris un gros truk du javascript qui a du me bloquer pour pas mal de choses...

28 avril 2009 à 12:35:29

Bah oui, c'est exactement ça

Renseigne toi sur les méthodes du DOM : parentNode, firstChild, lastChild, childNodes, nextSibling, etc.

birdy42

28 avril 2009 à 12:42:52

Est-ce qu'il y a un site où elles y sont toutes bien expliqué ?

'fin y a sûrement dans la doc :-°

vais chercher un peu

https://developer.mozilla.org/fr/R%C3% [...] _du_DOM_Gecko

28 avril 2009 à 12:52:09

birdy42

28 avril 2009 à 13:00:51

Alors là, super

Favoris

ça va me servir...
Merci

28 avril 2009 à 13:06:23

YourGod, si le sujet est résolu, pense à l'indiquer à l'aide du lien en bas de page.