Afficher un block
Résolu
barale61
Messages postés
1326
Statut
Membre
-
barale61 Messages postés 1326 Statut Membre -
barale61 Messages postés 1326 Statut Membre -
Bonjour,
J'essaie d'afficher un sous menu masqué par défaut dont voici mon css:
avec un lien dont voici le html:
avec un javascript:
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.
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:
- Afficher un block
- Block breaker - Accueil - Services en ligne
- Code block - Télécharger - Langages
- Afficher appdata - Guide
- Afficher taille dossier windows - Guide
- U block origine - Télécharger - Outils pour navigateurs
7 réponses
J'ai essayé de cette façon:
Mais ça me renvoi la même erreur.
function pieces() {
document.getElementById('pieces').style.display = 'block';
}
Mais ça me renvoi la même erreur.
Ceci fonctionne :
Et la version avec l' ID plutôt que la CLASS
<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';
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Finalement j'ai enlevé jquery pour éviter le conflit et je me demande alors comment je peux faire pour que:
si il est déjà ouvert comme je ne sais pas j'ai essayé bêtement comme ceci:
mais apparemment j'en suis loin.
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 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?
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/
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/
Je fais un tutoriel sur javascript et je souhaite comprendre avant d'utiliser jquery alors je fais:
mais le débogueur me renvoi l'erreur suivante:
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:
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';
}
}
