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.  jordane45 Modérateur
    Bonjour

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

    0
    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.
      0
      1. 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';
}

        0
        1. barale61 Auteur
          Merci mais j'ai toujours la même erreur qui est apparemment un conflit avec jquery.
          0
          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 !!
            0
        3. 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.
          0
          1. Rhydan1
            Dans ton IF c'est une comparaison que tu fais, donc tu dois mettre == 'none' et pas un seul = ;)
            0
          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/
            0
        4. 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:
          0
          1. Rhydan1
            Je comprend pas ton IF.. Il manque un truc dedans ^^

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

            --
            0
          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.
            0
        5. 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';
            }
        }
          0

          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