Sujet Précédent Sujet Suivant

Afficher un block

Résolu/Fermé
barale61 Messages postés 1211 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 février 2025 - 19 août 2015 à 18:01
barale61 Messages postés 1211 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 février 2025 - 7 oct. 2015 à 10:48
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.
A voir également:

7 réponses

Réponse 1 / 7
jordane45 Messages postés 38427 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 février 2025 4 735
19 août 2015 à 22:12
Bonjour

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


0
Réponse 2 / 7
barale61 Messages postés 1211 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 février 2025 110
20 août 2015 à 12:28
J'ai essayé de cette façon: 

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


Mais ça me renvoi la même erreur.
0
Réponse 3 / 7
jordane45 Messages postés 38427 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 février 2025 4 735
20 août 2015 à 13:02
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
Réponse 4 / 7
barale61 Messages postés 1211 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 février 2025 110
20 août 2015 à 17:15
Merci mais j'ai toujours la même erreur qui est apparemment un conflit avec jquery.
0
jordane45 Messages postés 38427 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 février 2025 4 735
20 août 2015 à 18:07
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

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

Posez votre question
Réponse 5 / 7
barale61 Messages postés 1211 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 février 2025 110
1 oct. 2015 à 19:34
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
Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
1 oct. 2015 à 21:18
Dans ton IF c'est une comparaison que tu fais, donc tu dois mettre == 'none' et pas un seul = ;)
0
somak
1 oct. 2015 à 21:58
+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
Réponse 6 / 7
barale61 Messages postés 1211 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 février 2025 110
2 oct. 2015 à 12:29
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
Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
4 oct. 2015 à 23:35
Je comprend pas ton IF.. Il manque un truc dedans ^^

--
0
Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70 > Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017
4 oct. 2015 à 23:37
Nan j'ai rien dis, essaye de retirer la deuxième condition dans ton IF, et regarde ce que ça donne

--
0
Utilisateur anonyme
5 oct. 2015 à 00:10
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
Réponse 7 / 7
barale61 Messages postés 1211 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 février 2025 110
7 oct. 2015 à 10:48
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