Discussion :

[laurentSc]

Bonjour,

mon objectif est très voisin de cette discussion : Masquer/ démasquer des Div avec JavaScript

En gros, j'ai 2 div et 2 textes et si l'on clique sur l'un d'eux, ça affiche le div correspondant et masque l'autre et j'ai cherché à utiliser ton code du post #2 Jérôme.
Sauf que je renomme les id vu que les noms d'origine n'ont pas de sens pour moi, et ça ne veut plus marcher (quand je clique, y a rien qui s'affiche).
Quel est mon bug ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
<a onclick="showdiv('creer'); " href="#">créer album</a>
<a onclick="showdiv('effacer'); " href="#">effacer album</a>
 
<div  class="divTexte"id="creer">
    creer
</div>
 
<div class="divTexte" id="effacer">
effacer
</div>

Code css :

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

 .divTexte { display: none; }

Code js :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function showdiv(id) {
  var divTextes = document.querySelectorAll('.divTexte');
  for (var i = 0, n = divTextes.length; i < n; i++) {
    divTextes[i].style.display = 'none';
  }
  document.getElementById(id).style.display = 'block';
}
 
</script>

[Invité]

Bonjour MLaurent,

1- ton code fonctionne correctement tel quel.

Vérifie que tu n'as pas d'autres <div> avec les mêmes id.
Car un id DOIT être UNIQUE.


2-Cela dit, j'utiliserais plutôt des <button> :

Code html :

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

1
2
<button type="button" onclick="showdiv('creer'); ">créer album</button>
<button type="button" onclick="showdiv('effacer'); ">effacer album</button>

Sinon, il faut ajouter return false; (pour désactiver le lien <a>) :

Code :

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

1
2
<a onclick="showdiv('creer'); return false;" href="#">créer album</a>
<a onclick="showdiv('effacer'); return false;" href="#">effacer album</a>

[laurentSc]

Perdu car ligne 4 du html, il manquait un espace :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<button type="button" onclick="showdiv('creer'); ">créer album</button>
<button type="button" onclick="showdiv('effacer'); ">effacer album</button>
 
<div  class="divTexte" id="creer">
    creer
</div>
 
<div class="divTexte" id="effacer">
effacer
</div>