masquer un div par javascript ? [Résolu]

[BXDSPORT]

Bonjour

J'ai effectué le script suivant

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
script>
 var bool=true;
 function affiche() {
  if(bool==true) {
	  document.getElementsByName("calculs").style.display='block';
	  bool=false;
  }else
  {
	  document.getElementsByName("calculs").style.display='none';
	  bool=true;
  }
 }
</script>
 
<div class="Btitineraire"> <a href="" onClick="affiche()"> Définir votre Itinéraire</a></div>
 
<div class="calitinaire" name="calculs">
</div>

Losque je clique sur le bouton, mon div reste affiché. Voyez vous pourquoi ?
Où est mon erreur ?

Cordialement

[Bovino]

Voyez vous pourquoi ?

Oui !
Comme le s de elements l'indique, getElementsByName() renvoie une collection et une collection n'a pas de propriété style...
Il faut faire une boucle sur chaque élément de la collection.

[BXDSPORT]

BIen vu pour le s mais la fonction ne marche toujours. Mon div reste affiché.
Est ce que cela peut provenir de la class avec un fichier CSS externe ?

Merci

[Willpower]

tu ne dois pas retirer le s, bovino te faisait simplement remarquer que ta fonction renvoyait une "liste". tu dois donc accèder au bon élément de la liste, soit le premier(index 0) si tu n'en as qu'un :

Code :

document.getElementsByName("calculs")[0].style.display='block';

aussi ceci est une aberration :

Code :

if(bool==true)

sachant que la condition EST un booléen, tant qu'à faire pourquoi ne pas faire :

Code :

1
2
3
if(((((bool==true)==true)==true)==true){
 
}

(la bonne syntaxe est donc if(bool) )


edit:


sinon, le mieux est encore d'utiliser un ID qui contrairement au name doit être unique.

Code html :

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
var b;
function affiche() {
  document.getElementById("calculs").style.display = (b^=1)?'none':'block';
  return false;
}
</script>
<a href="#" onclick="return affiche();">Masquer/Afficher</a>
<div id="calculs">DIV CACHE</div>

edit2: petite modif' en tenant compte du commentaire de noSmoking.

[NoSmoking]

une autre petite chose

Code :

<a href="" onClick="affiche()">

il te faut mettre un return false pour que la page ne se recharge pas, il a pour effet d'annihilé l'action par défaut du href.

[BXDSPORT]

Superbe votre explication - Tout marche. Vos explications sont très claires. Le fait d'avoir oublier ce return false change tout.
En espérant de vous rendre l'appareil.

Cordialement à tous