Discussion :

[mensoif]

Bonjour z'a tous !

je cherche à introduire dans ma page un mécanisme de mode (normal, avancé) avec comme mode par défault (première visite de la page) à normal. Puis en fonction du "clic" sur l'un des boutons, afficher le contenu lié à ce mode.

En gros, en mode normal, j'ai un div particulier qui s'affiche, idem en mode avancé.

Pour ce faire, j'ai écris deux fonctions l'une permettant l'affichage du mode avance et l'autre normal. Elles ont le corps suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function Affich_normal () {
    var ObjToAffich = document.getElementById ('normal_mode');
	var ObjToCache  = document.getElementById ('avance_mode');
	if (ObjToAffich) {
	    ObjToAffich.style.display = "block";
	}
	if (ObjToCache) {
	    ObjToCache.style.display = "none";
	}
}
 
function Affich_avance () {
	var ObjToAffich = document.getElementById ('avance_mode');
	var ObjToCache  = document.getElementById ('normal_mode');
	if (ObjToAffich) {
	    ObjToAffich.style.display = "block";
	}
	if (ObjToCache) {
	    ObjToCache.style.display = "none";
	}
}

Ce qui vous permez de remarquer que le corps est horriblement proche (deux variables sont swappé).

J'ai donc voulus écrire une seul fonction qui pourrait jouer ce même rôle,
soit montrer le bloc d'id 1 ( premier arg) et cacher le 2.
J'aurais ainsi simplement à intervertir l'ordre des id.

J'ai donc écris le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function Affich (enable, disable) {
 
	var show_frm = document.getElementById (enable);
	var hide_frm = document.getElementById (disable);
 
	if (show_frm) {
		show_frm.style.display = "block";
	}
	if (hide_frm) {
		hide_frm.style.display = "none";
	}	
 
}

Malheureusement, l'effet escompter n'est pas là. Lorsque je fais mes appels de la façon suivante :

<a href="#" onclick="Affich('normal_mode', 'avance_mode')" alt="Mode_normal">Normal</a>
<a href="#" onclick="Affich('avance_mode','normal_mode')" alt="Mode_avance">Avanc&eacute;</a>

Pour avoir un comportement se rapprochant de ce que je veux il faut que j'intervertisse le second appel à Affich par Affich_avance ();

Si quelqu'un pouvait m'éclairer =)

petite précision css, j'ai mon block d'id normal_mode en display : block et mon block d'id avance_mode en display : none; ( ce qui correspond à mon affichage par défaut).

[le_chomeur]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function Affich_avance(doIt) {
	var avance = document.getElementById ('avance_mode');
	var normal  = document.getElementById ('normal_mode');
 
	    avance.style.display = (doIt) ? "block":"none";
	    normal.style.display = (!doIt) ? "block":"none";
}

??

doIt vaudra true ou false

[mensoif]

Zehr gut, l'objectif est atteint!

Cependant, je n'ai toujours pas saisie le pourquoi qui fait que ma fonction "Affich(disable, enable)" ne fonctionnait pas. Aurais-tu une petite idée avant que je ne mette le poste comme Résolu ?

[le_chomeur]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Affich (enable, disable) {
	//Enabled vaudra l'id souhaité
 
	var show_frm = document.getElementById (enable); //Récupération de l'id souhaité a voir
	var hide_frm = document.getElementById (disable);
 
//On test si l'élément existe
	if (show_frm) {
//Si oui on l'affiche
		show_frm.style.display = "block";
	}
//Test si l'élément existe
	if (hide_frm) {
//Si oui on le masque
		hide_frm.style.display = "none";
	}	
 
}

[mensoif]

Oui c'est bien de cette fonction que je parle, mais je ne vois pas pourquoi tu as fait un copier coller ? :o

Si tu n'as pas d'idée du dysfonctionnement ce n'est pas grave..

[bigboomshakala]

Oui c'est bien de cette fonction que je parle, mais je ne vois pas pourquoi tu as fait un copier coller ? :o

Si tu n'as pas d'idée du dysfonctionnement ce n'est pas grave..

les commentaires qui ont été ajouté dans le code sont là pour t'aider à comprendre...