Optimisation fonction, 1 pour le prix de 2

Version imprimable

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:

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:

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 :

Citation:

<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é</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).

Code:

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 :)

26/05/2009, 10h36
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 ?

Code:

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";
	}	
 
}

26/05/2009, 11h03
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..
26/05/2009, 11h06
bigboomshakala

Citation:

Envoyé par 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..

les commentaires qui ont été ajouté dans le code sont là pour t'aider à comprendre...
26/05/2009, 11h10
le_chomeur

:calim2:

effectivement j'ai commenté chaque ligne , maintenant a toi de voir pourquoi ça ne marche pas :) ( problème d'id , etc ... )
26/05/2009, 11h34
mensoif

Justement j'ai compris le code (vus que c'est moi qui l'ai écrit :p) mais je ne comprends pas que son fonctionnement soit différent de mes attentes.

En effet, je voulais remplacer mes deux autres fonctions écrites précédemment par celle ci.

J'ai donc opté pour de la modularité dans la fonction, on lui passe deux éléments, elle affiche le premier et cache le second.

Mes deux blocs div sont bien présent. Ensuite, lorsque je place une occurrence de cette fonction, le résultat est bon, c'est lorsque je la place dans les deux 'onclick' qu'il y a boulette.

Enfin bref, ce n'est pas grave et merci pour le coup de main!

Ceci fonctionne bien! Enfin de ce que j'ai compris :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
    body {background:#000;color:#ccc}
    div {width:200px;height:200px;}
    #n {background:#333;}
    #a {background:#666;}
   </style>
</head>
<body>
  <div id="n">mode normal</div>
  <div id="a">mode avancé</div>
  <button id="b1" type="button" value="n" onclick="Affich('n', 'a');">afficher le mode normal</button>
  <button id="b2" type="button" value="a" onclick="Affich('a', 'n');">afficher le mode avancé</button>
  <script type="text/javascript">
  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";}	
  }
 
  //document.getElementById("b1").onclick = function() { Affich("n", "a"); };
  //document.getElementById("b2").onclick = function() { Affich("a", "n"); };
  </script>
</body>
</html>

26/05/2009, 12h24
mensoif

Oo en effet tu as raison, je viens de faire le test en aparté. Cela dit, j'ai hérité du .css de l'architecture web (soit 1300 lignes). Le problème doit surement y être caché... et je pense qu'il le restera, à moins que je trouve le temps.

(en tous cas ma fonction fonctionne quand même :roi:

Merci à vous tous!

Résolu !
26/05/2009, 12h51
franculo_caoulene

D'où l'intérêt de poster un code réduit au plus simple illustrant le problème. Ca permet bien souvent de résoudre le problème avant même de poster.
26/05/2009, 13h37
le_chomeur

j'ai rien compris :aie:
26/05/2009, 13h56
franculo_caoulene

Si tu ne comprends pas ce que je dis. Je dis juste qu'en te forçant à extraire un problème de façon à produire un code comme celui que j'ai fournis te permet bien souvent de résoudre ton problème tout seul, comme un grand.
26/05/2009, 13h58
le_chomeur

non pas par a ton intervention franculo ;-)
mais par rapport a l'utilisateur ...
26/05/2009, 15h41
mensoif

De quoi parles tu ?