Afficher un block

Résolu
barale61 Messages postés 1126 Date d'inscription   Statut Membre Dernière intervention   -  
barale61 Messages postés 1126 Date d'inscription   Statut Membre Dernière intervention   -
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 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonjour

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

    0
  2. barale61 Messages postés 1126 Date d'inscription   Statut Membre Dernière intervention   113
     
    J'ai essayé de cette façon: 

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


    Mais ça me renvoi la même erreur.
    0
  3. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    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
  4. barale61 Messages postés 1126 Date d'inscription   Statut Membre Dernière intervention   113
     
    Merci mais j'ai toujours la même erreur qui est apparemment un conflit avec jquery.
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      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

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. barale61 Messages postés 1126 Date d'inscription   Statut Membre Dernière intervention   113
     
    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 Messages postés 438 Statut Membre 70
       
      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
  7. barale61 Messages postés 1126 Date d'inscription   Statut Membre Dernière intervention   113
     
    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 Messages postés 438 Statut Membre 70
       
      Je comprend pas ton IF.. Il manque un truc dedans ^^

      --
      0
      1. Rhydan1 Messages postés 438 Statut Membre 70 > Rhydan1 Messages postés 438 Statut Membre
         
        Nan j'ai rien dis, essaye de retirer la deuxième condition dans ton IF, et regarde ce que ça donne

        --
        0
    2. 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
  8. barale61 Messages postés 1126 Date d'inscription   Statut Membre Dernière intervention   113
     
    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 -
Mehdiiii -

27 réponses
probleme d'affichage des images sous word
crosser -
Tan -

85 réponses
affichage tableau sous C
Utilisateur anonyme -
fonceurweb -

2 réponses
remettre toutes les colonnes et les lignes masquées
mousaillon -
oumnas -

4 réponses