11548 sujets

JavaScript, DOM et API Web HTML5

Je cherche un moyen d'afficher et de masquer des éléments de ma page selon des cliques de l'utilisateur.
Mais je ne veux absolument pas de javascript ailleurs que dans le <head> de la page, pas même d'attribut onClick dans les liens. Je sais je suis compliqué mais c'est comme ça, je pense à la maintenance avant tout.

Voici la structure de ma page :


<ul id="page">
 <li>
  <span><a href="#">Lien principal 1</a></span>
  <ul>
   <li>
    <span><a href="#">Lien secondaire 1_1</a></span>
    <div>Une div avec du texte et des liens</div>
   </li>
   <li>
    <span><a href="#">Lien secondaire 1_2</a></span>
    <div>Une div avec du texte et des liens</div>
   </li>
  </ul>
 </li>
 <li>
  <span><a href="#">Lien principal 2</a></span>
  <ul>
   <li>
    <span><a href="#">Lien secondaire 2_1</a></span>
    <div>Une div avec du texte et des liens</div>
   </li>
   <li>
    <span><a href="#">Lien secondaire 2_2</a></span>
    <div>Une div avec du texte et des liens</div>
   </li>
  </ul>
 </li>
</ul>


une petite feuille de style basique :

 #page ul { display: none; }
 #page div { display: none; }


Et j'aurais besoin d'une fonction javascript pour faire faire apparaitre les éléments suivants immédiatement les liens lorsque l'on clique sur l'un d'eux.
Pour ça j'ai commencé, dans une fonction qui s'appelle au chargement de la page, à faire la collections des seuls liens qui m'intéressaient :

var menulinks = document.getElementById('page').getElementsByTagName('li').getElementsByTagName('span').getElementsByTagName('a');


Voilà déja la première ligne qui me donne des erreurs puisqu'on me préviens systématiquement que document.getElementById('page').getElementsByTagName('li').getElementsByTagName
n'est pas un fonction... Smiley ohwell

Ensuite je faisais cette boucle :

 for (var i = 0 ; i < menulinks.length ; ++i) {
		// Au clique sur ces liens 
		menulinks[\i].onclick = function() { //l'anti slash avant le i ne fait pas partis du code
			this.parentNode.parentNode.lastChild.style.display = 'block';
			return false;
		};		
	}


Es-ce que cette partie vous à l'air correcte ? Y aurait-il beaucoup plus simple ?

D'avance merci !
Modifié par lrbabe (30 May 2006 - 22:18)
Bonsoir,
getElementsByTagName te renvoie un tableau d'éléments, qu'il y en ait 0, 1, 2 ou plus. Quoi que tu fasses, tu reçois toujours un tableau.
Comme tu tentes d'a'ppeler une fonction réservé aux noeuds DOM sur un tableau, forcément, ça plante.


Plusieurs pistes de résolution :
- Si tu es sûr que la fonction getElementsByTagName ne te renvoie qu'un seul élément, tu peux directement pointer sur l'index 0 en ajoutant [0] :
machin.getElementsByTagName('truc')[0].getElementsByTagName......

- Si tu es censé recevoir plusieurs éléments, tu dois parcourir le tableau avec une boucle forr. Rien ne t'exclut, bien sûr, d'avoir plusieurs boucles for imbriquées.
document.getElementById('page').getElementsByTagName('li').getElementsByTagName n'est pas une fonction
C'est normal, si tu l'a écrit de la sorte, cela ne fonctionnera pas à coup sûr.

En effet getElementsByTagName('li') retourne un tableau, donc il faut indiquer l'index du tableau que l'on choisi, sinon il va essayer de trouver la fonction Array.getElementsByTagName, une fonction qui existerai sur un objet tableau !? Smiley confus

Donc il faut faire :
document.getElementById('page').getElementsByTagName('li')[0].getElementsByTagName('span')[0].getElementsByTagName('a')
Cela te retournera un tableau que tu a prévu d'utiliser dans ta boucle ... Smiley langue

EDIT: QuentinC à répondu avant moi pendant que je rédigais mon message ... Smiley ravi
Modifié par heyman85 (30 May 2006 - 20:09)
Et c'était exactement ce dont j'étais en train de me rendre compte.

J'apprends sur le tas en commençant par des choses pas simplissimes. Ça me fait enrager mais je finis toujours par trouver la solution. De toute manière j'ai que ça à faire : je suis en stage et mon patron ne s'occupe pas de moi.

Merci à vous en tout cas ! Smiley biggrin
Le grillade ???

Bon finalement j'ai fait complètment différemment et j'ai un truc aui marche et dont je suis fier !
Ah il a pas compris le gag de la grillade.

Tentative d'explication : sur un forum, quand quelqu'un devance quelqu'un d'autre en répondant à une question, on dit que le premier a grillé le second ou que le second a été grillé par le premier ...