Discussion :

[Taharoa]

Bonjour à tous
Voila, je débute en JS et j'ai une question bête
Je voudrais faire en sorte que lorsque l'on clique sur un <div>, cela affiche/masque un autre div. Donc jusque là tout va bien, je crée ma fonction:

Code :

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

1
2
3
4
5
6
7
8
function afficher_element(id){
	var elt = document.getElementById(id);
	if(elt.style.display == 'none'){
		elt.style.display='block';
	}else{
		elt.style.display='none';
	}
}

Cette fonction est utilisée pour plusieurs types de div, des articles, une console de login, etc...
Hors certains de ces éléments sont par défaut en display:block, et d'autres par défaut en display:none.

Le truc c'est que ma fonction ne marche pas au 1er coup pour les éléments qui sont masqués par défaut, comme si il ne détectait pas qu'ils sont en display:none...
Si je change et que je met dans ma fonction

Code :

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

1
2
3
4
5
6
7
8
function afficher_element(id){
	var elt = document.getElementById(id);
	if(elt.style.display != 'block'){
		elt.style.display='block';
	}else{
		elt.style.display='none';
	}
}

ca ne marche pas non plus, pour les éléments activés de base ce coup-ci. Donc j'ai l'impression qu'il voit toujours les éléments en display:block par défault, même si dans mon .css ils sont définis en display:none

Auriez vous une idée pour éviter ça??
Merci.
Taharoa

[Bovino]

Essaye peut-être comme ça :

Code :

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

1
2
3
4
function afficher_element(id){
	var elt = document.getElementById(id);
	elt.style.display=(elt.style.display == 'block')?'':'block';
}

[SpaceFrog]

Code :

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

elt.style.display=(elt.style.display == 'none')?'':'none';

[Taharoa]

Bovino > Merci pour ta réponse mais ça ne fonctionne pas non plus.
Ca marche pour les éléments masqués de base mais ca ne fonctionne plus du tout pour les éléments affichés de base.

Spacefrog > Idem sauf que ca marche pour les affichés et plus du tout pour les masqués

[Bovino]

certains de ces éléments sont par défaut en display:block, et d'autres par défaut en display:none.

Code :

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

1
2
3
4
function afficher_element(id){
	var elt = document.getElementById(id);
	elt.style.display=(elt.style.display == 'block')?'none':'block';
}

Désolé...

[Taharoa]

Non plus, j'ai le même problème qu'au début, la syntaxe est équivalente de toute facon non?

[SpaceFrog]

Code :

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

elt.style.display=(elt.style.display == 'block' || elt.style.display == '')?'none':'';

[Taharoa]

elt.style.display=(elt.style.display == 'block' || elt.style.display == '')?'none':'';
Affichés : OK
Masqués : plus du tout

elt.style.display=(elt.style.display == 'block' || elt.style.display == '')?'none':'block';
Affichés : OK
Masqués : a partir du 2eme coup

[SpaceFrog]

definis le display par défaut dans la balise ...

sinon il faudra passer par le computedStyle ...

[Taharoa]

Alors j'ai ajouté un alert(elt.style.display) au début de la fonction, et en fait, que l'élément soit masqué ou non par défault, il m'affiche ''... Donc il ne fait pas la différence entre les 2 :/

SpaceFrog tu veux dire quoi par définir le display par défaut dans la balise?
<div id=... style="display:none;"> a la place du css ?
C'est un peu moche ca, le computedStyle c'est quoi?

[SpaceFrog]

Taha c'est un peu moche certes ... mais c'est sans doute la seule façon de faire un truc crossbrowser ...

sinon à tout hasard:

Code :

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

1
2
elt.style.display=elt.style.display;
elt.style.display=(elt.style.display == '')?'none':'';

[Taharoa]

Non ca marche pas non plus.

Bon je vais me pencher sur autre chose en attendant voir si d'autres solutions arrivent, sinon je ferais soit ça soit 2 fonctions, une pour chaque cas...
Merci =)

[SpaceFrog]

ou un switch ...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
switch (elt.style.display){
    case '': elt.style.display='none';
               break;
    case 'block': elt.style.display='none';
               break;
    case 'none': elt.style.display='';
               break;
    default: elt.style.display='';
    }

[Taharoa]

ou un switch ...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
switch (elt.style.display){
    case '': elt.style.display='none';
               break;
    case 'block': elt.style.display='none';
               break;
    case 'none': elt.style.display='';
               break;
    default: elt.style.display='';
    }

Hmmm je pense pas étant donné qu'il détectera forcément la 1ere iteration come un '' ca marchera pas au 1er coup pour les éléments masqués

[SpaceFrog]

et bien mets le none avant ...

[Auteur]

bonjour,

certains de ces éléments sont par défaut en display:block, et d'autres par défaut en display:none.

si la valeur de l'attribut display est défini dans la CSS, style.display renverra toujours une chaine vide !!

Ce que tu peux faire :
- séparer les styles :

Code :

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

1
2
3
4
5
6
7
 
.cache{
display: none;
}
.montre{
display: block;
}

puis dans le code JS ne teste pas la valeur de display, mais regarde la classe qui s'applique à l'objet :

Code javascript :

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
 
function afficheCacheObjet(idObjet)
{
  var obj = document.getElementById(idObjet);
  if (obj.className=="montre")
  {
      obj.className = "cache";
  } 
  else
  {
      if (obj.className=="cache")
      {
          obj.className = "montre";
      } 
  }
}

Maintenant si className appelle plusieurs classes, tu peux utiliser cette expression régulière pour les séparer, ensuite tu réalises une boucle qui recherche la présence de la classe montre ou de la classe cache. Puis tu appliques le code que j'ai donné ci-dessus.