Externaliser le JavaScript

[v4np13]

Bonjour, (problèmes résolus, solution plus bas )

Suite à la lecture de l'article Séparer le comportement de la structure, j'essaye de séparer le JavaScript du code HTML. Ce n'est pas évident quand on ne pratique pas le JavaScript tout les jours.

J'ai une page web avec une ligne du temps qui a plusieurs liens (liens par année). En dessous de cette ligne du temps, j'ai un cadre par année. Par défaut, je les affiche tous. Quand l'utilisateur clique sur un des liens, j'aimerai qu'il n'affiche que la boite de l'année sélectionnée. Cela fonctionnait avec de vulgaires onclick sur mes liens, mais je souhaiterai séparer la couche présentation contenu de la couche événementielle.

J'ai placé des id sur mes liens: annee2006lien, annee2007lien et quand on cliquera sur un de ces liens, seul celui de l'année sélectionnée s'affichera. Par exemple, annee2006lien affichera annee2006 et cachera annee2007.

Voici le code JS qu'il exécute à chaque chargement de page:

window.onload = initAffichageAnnees;
function initAffichageAnnees(){
	var tableLength = tableAnnees.length;

	var nav = document.getElementById('timeline');	// récupère la ligne du temps
	var liens = nav.getElementsByTagName('a');	// récupère les liens de la ligne du temps

	for (i = 0; i < liens.length; i++){
		var idName = liens[i].id;
		idName = idName.substr(0,9);		//transforme annee2006lien en annee2006

		liens[i].onclick = function() {		//rajoute le onclick au lien
					afficher(idName);
				};
	}
}

Voici le contenu de la fonction Afficher (inchangée avec le passage onclick dans la page html -> onclick dans un fichier externe):

function afficher(element){
	var tableAnnees = new Array("annee2006", "annee2007", "annee2008"); 
	var tableLength = tableAnnees.length;

	if (element != null){
		document.getElementById(element).style.display = 'block'; //affiche l'element
		document.getElementById("btnAfficherTout").style.display = 'block';
		for (i=0; i<tableLength; i++) {
			if (tableAnnees[i] != element)
				document.getElementById(tableAnnees[i]).style.display = 'none';
		}
	}
	else{//affiche tout
		for (i=0; i<tableLength; i++) {
			document.getElementById(tableAnnees[i]).style.display = 'block';
		}
		document.getElementById("btnAfficherTout").style.display = 'none';
	}
}

Actuellement, quand on clique, il cache pendant un dixième de seconde avant de tout réafficher. Et j'ai également remarqué qu'il affichait toujours le même cadre. Ce cadre correspond au dernier de la boucle des liens (dans le code d'initialisation). D'après ce que je comprends (débutant inside), il réinitialise à chaque fois qu'on clique et il perdrait l'endroit où j'ai cliqué (valeur de idName) ?

Je pense qu'il y a deux problèmes:

-le fait qu'il cache seulement pendant un dixième de seconde, pourquoi il ne laisse pas caché/affiché comme avant quand je faisais mes onclick dans le code html?

-le fait qu'il perde le lien cliqué, si je clique sur 2006, il m'affiche le cadre de 2008 (dernier dans la boucle des liens).

Pourriez-vous m'aider ?

Merci d'avance

Modifié 1 Juin 2009 par v4np13

[v4np13]

Après quelques recherches, j'ai trouvé une des deux solutions. Le problème du dernier de la boucle:

window.onload = initAffichageAnnees;
function initAffichageAnnees(){
	var tableLength = tableAnnees.length;

	var nav = document.getElementById('timeline');	// récupère la ligne du temps
	var liens = nav.getElementsByTagName('a');	// récupère les liens de la ligne du temps

	for (i = 0; i < liens.length; i++){
		var idName = liens[i].id;

		liens[i].idName = idName.substr(0,9);		//transforme annee2006lien en annee2006 et stocke dans liens[i]
		liens[i].onclick = function() {		//rajoute le onclick au lien
					afficher(this.idName);		///récupère l'idName de cet objet
				};
	}
}

En utilisant this.idName.

Il ne reste plus que le problème de l'affichage qui ne reste pas plus longtemps qu'un dixième de seconde.

[v4np13]

Quelques minutes plus tard, j'ai trouvé la deuxième solution, rajouter un return false;:

function initAffichageAnnees(){
	var tableLength = tableAnnees.length;

	var nav = document.getElementById('timeline');	// récupère la ligne du temps
	var liens = nav.getElementsByTagName('a');	// récupère les liens de la ligne du temps

	for (i = 0; i < liens.length; i++){
		var idName = liens[i].id;
		idName = idName.substr(0,9);		//transforme annee2006lien en annee2006
		liens[i].idName = idName;
		liens[i].onclick = function() {
					afficher(this.idName);
					return false;
				};
	}
}