Afficher un block

Résolu
barale61 -  
Bonjour,

J'essaie d'afficher un sous menu masqué par défaut dont voici mon css: 
.pd { /* Masque le menu pièces détachées */
    display: none;
}


avec un lien dont voici le html: 
<a href="javascript:pd();">


avec un javascript: 
function pd() {
    document.getElementsByClassName('pd').style.display = 'block';
}


mais le débogueur m'affiche l'erreur:

TypeError: document.getElementsByClassName(...).style is undefined
error source line:
document.getElementsByClassName('pd').style.display = 'block';

mais style est pourtant bien défini !

Je vous remercie de votre aide.

7 réponses

  1.  barale61 Auteur
    Merci pour vos réponses, finalement j'ai fait: 

    function sous_menu() {
    var sous_menu = document.getElementById('sous_menu');
    var btn_plus = document.getElementById('btn_plus');
    var btn_moins = document.getElementById('btn_moins');
    var child = document.getElementById('child');

    if (sous_menu.style.display == 'none' ||  sous_menu.style.display == '') {
                sous_menu.style.display = 'block';
                btn_plus.style.display = 'none';
                btn_moins.style.display = 'block';
                child.style.height = '146px';
            }
    else {
                sous_menu.style.display = 'none';
                btn_plus.style.display = 'block';
                btn_moins.style.display = 'none';
                child.style.height = '20px';
            }
        }
    1.  barale61 Auteur
      Je fais un tutoriel sur javascript et je souhaite comprendre avant d'utiliser jquery alors je fais: 

      function sous_menu() {
    var elem = document.getElementById('sous_menu');
 
    if (elem.style.display == 'none' ||  elem.style.display == ''); 
            {
                elem.style.display = 'block';
            }
    else 
            {
                elem.style.display = 'none';
            }
}

      mais le débogueur me renvoi l'erreur suivante:
      1. Rhydan1
        Je comprend pas ton IF.. Il manque un truc dedans ^^

        --
      2. Rhydan1
        @Rhydan1Nan j'ai rien dis, essaye de retirer la deuxième condition dans ton IF, et regarde ce que ça donne

        --
      3. Utilisateur anonyme
        Bonjour

        Il y a surtout un ; en trop à la fin du if.
        Ce ";" représente une instruction (vide) et c'est cette instruction qui est soumise au if, pas le bloc entre { } qui suit. Donc le else après ce bloc est considéré comme une erreur par javascript.
    2. barale61 Auteur
      Finalement j'ai enlevé jquery pour éviter le conflit et je me demande alors comment je peux faire pour que: 
      elem.style.display = 'none';

      si il est déjà ouvert comme je ne sais pas j'ai essayé bêtement comme ceci: 
         if elem.style.display = 'none'; 
        {
            elem.style.display = 'block';
        }
        else 
        {
            elem.style.display = 'none';
        }

      mais apparemment j'en suis loin.
      1. Rhydan1
        Dans ton IF c'est une comparaison que tu fais, donc tu dois mettre == 'none' et pas un seul = ;)
      2. somak
        +1 pour la comparaison (==)au lieu d'une affectation(=).

        Mais pourquoi ne pas utiliser JQuery dans ce cas vu qu'il était implémenté?
        C'est bien plus simple et rapide à écrire, en tout cas si vous devez cachez/afficher un menu il y a une action utilisateur à la base? 

        $(document).ready(function(){
// afficher
$('#afficher').click(function(){
   $('#pd').show()}
   );
//masquer
  $('masquer').cllick(function(){
  $('#pd').hide();
  }
);

});


        Il y a même des fonctions pour faire bascule en utilisant le même bouton sans avoir à écrire de tests:

        http://api.jquery.com/toggle/
    3. barale61 Auteur
      Merci mais j'ai toujours la même erreur qui est apparemment un conflit avec jquery.
      1. jordane45 Modérateur
        Donc... rien à voir avec ce code !!

        Si tu as une erreur. .. elle se trouve ailleurs. .. et nous... sans le message. .. impossible de t'aider !!
    5. jordane45 Modérateur
      Ceci fonctionne : 
      <html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>test</title>
    <style>
    .pd { /* Masque le menu pièces détachées */
          display: none;
      }
    </style>
  </head>
  <body>

  <div class="pd" id="toto">ceci est un test</div>
  <a onclick="pd();">test</a>
  </body>
</html>
 
<script type="text/javascript">
function pd() {
    var elem = document.getElementsByClassName('pd');
    for(var i=0;i<=elem.length-1;i++){
     elem[i].style.display = 'block';
    }
}
 
 </script>


      Et la version avec l' ID plutôt que la CLASS 
      function pd() {
    var elem = document.getElementById('toto');
     elem.style.display = 'block';
}

      1. barale61 Auteur
        J'ai essayé de cette façon: 

          function pieces() {
  document.getElementById('pieces').style.display = 'block';
 }


        Mais ça me renvoi la même erreur.
        1. jordane45 Modérateur
          Bonjour

          De mémoire .getElementsByClassName retourne un array... pas un élément unique. ..

          Discussions similaires

          Excel : afficher toutes les lignes et colonnes masquées
          livlarsen

          27 réponses
          remettre toutes les colonnes et les lignes masquées
          mousaillon

          4 réponses
          Où sont affichés les FPS Minecraft
          Guerric

          9 réponses