IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

masquer un div par javascript ?


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de BXDSPORT
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Mars 2002
    Messages
    353
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Mars 2002
    Messages : 353
    Par défaut masquer un div par javascript ?
    Bonjour

    J'ai effectué le script 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
    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

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre éclairé Avatar de BXDSPORT
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Mars 2002
    Messages
    353
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Mars 2002
    Messages : 353
    Par défaut
    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

  4. #4
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementsByName("calculs")[0].style.display='block';

    aussi ceci est une aberration :

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    une autre petite chose
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <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.

  6. #6
    Membre éclairé Avatar de BXDSPORT
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Mars 2002
    Messages
    353
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Mars 2002
    Messages : 353
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Masquer afficher div en javascript
    Par albokos dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 13/10/2009, 14h23
  2. [Debutant] changer des images dans une div par une fonction javascript
    Par raul_le_vieux dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/06/2007, 09h35
  3. [JAVASCRIPT] DIV par dessus SELECT dans IE (again I know)
    Par speedev dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 26/07/2006, 16h57
  4. [CSS & JAVASCRIPT] Afficher/Masquer un div
    Par alexfrere dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 05/07/2006, 15h02
  5. Redimensionnement DIV par javascript
    Par PoZZyX dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 16/11/2005, 11h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo