Optimisation fonction, 1 pour le prix de 2

**mensoif** · 26/05/2009, 09h39

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é</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** · 26/05/2009, 09h55

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

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** · 26/05/2009, 10h39

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** · 26/05/2009, 11h03

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** · 26/05/2009, 11h06

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...

**le_chomeur** · 26/05/2009, 11h10

effectivement j'ai commenté chaque ligne , maintenant a toi de voir pourquoi ça ne marche pas

( problème d'id , etc ... )

**mensoif** · 26/05/2009, 11h34

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!

**franculo_caoulene** · 26/05/2009, 11h59

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

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

**mensoif** · 26/05/2009, 12h24

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

Merci à vous tous!

Résolu !

**franculo_caoulene** · 26/05/2009, 12h51

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.

**le_chomeur** · 26/05/2009, 13h37

j'ai rien compris

**franculo_caoulene** · 26/05/2009, 13h56

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.

**le_chomeur** · 26/05/2009, 13h58

non pas par a ton intervention franculo ;-)
mais par rapport a l'utilisateur ...

**mensoif** · 26/05/2009, 15h41

De quoi parles tu ?

Optimisation fonction, 1 pour le prix de 2

JavaScript

Discussions similaires

Partager

Partager