Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Faire apparaître et disparaître une div

Faire apparaître et disparaître une div

5 réponses
Avatar
Fabrice Delente
Bonjour.

Désolà de poser une question aussi triviale, mais j'aimerais comprendre
pourquoi mon code ne marche pas.

J'ai tout simplement un bouton qui doit faire apprarapitre une div si on
clique dessus, et la faire disparaître si on reclique dessus.

Voici mon code :

<html>
<body>

<input type=button value="Voir une indication" onclick="voirUneIndication()">
<script type="text/javascript" encoding="text/iso8859-1">
var montreIndication=0;

function voirUneIndication() {
if(montreIndication==0) {
montreIndication=1;
document.getElementById('indication').style.display='visible';
}
else {
montreIndication=0;
document.getElementById('indication').style.display='none';
}
}
</script>

<div id="indication" style="display:visible">Faites les
patrons des cubes, puis découpez-les et pliez-les
pour bien voir comment les
différentes faces se disposent.</div>

</body>
</html>

Si je clique une fois sur le bouton, le texte disparaît. Mais ensuite il ne
réaparaît jamais... pourquoi ??

Merci !

À bientôt.

--
Fabrice DELENTE

SVP, ne m'envoyez pas de pièces jointes aux formats Word, PowerPoint, RTF
(formats propriétaires). Utilisez des formats libres comme txt, html, ou
OpenOffice.Org, ou un format ouvert comme PDF. Merci. Voir
http://www.gnu.org/philosophy/no-word-attachments.fr.html
Signaler un problème avec ce contenu

5 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Y a personne
Fabrice Delente a écrit :
Bonjour.

Désolà de poser une question aussi triviale, mais j'aimerais comprendre
pourquoi mon code ne marche pas.

J'ai tout simplement un bouton qui doit faire apprarapitre une div si on
clique dessus, et la faire disparaître si on reclique dessus.

Voici mon code :

<html>
<body>

<input type=button value="Voir une indication" onclick="voirUneIndication()">
<script type="text/javascript" encoding="text/iso8859-1">
var montreIndication=0;

function voirUneIndication() {
if(montreIndication==0) {
montreIndication=1;
document.getElementById('indication').style.display='visible';
}
else {
montreIndication=0;
document.getElementById('indication').style.display='none';
}
}
</script>

<div id="indication" style="display:visible">Faites les
patrons des cubes, puis découpez-les et pliez-les
pour bien voir comment les
différentes faces se disposent.</div>

</body>
</html>

Si je clique une fois sur le bouton, le texte disparaît. Mais ensuite il ne
réaparaît jamais... pourquoi ??

Merci !

À bientôt.




Bonjour,

c'est normal, la valeur 'visible', c'est pour visibility.
avec display tu dois utiliser 'none' et 'block'.
Avatar
Y a personne wrote:
c'est normal, la valeur 'visible', c'est pour visibility.
avec display tu dois utiliser 'none' et 'block'.



Tout bêtement... merci, je suis confus !

--
Fabrice DELENTE

SVP, ne m'envoyez pas de pièces jointes aux formats Word, PowerPoint, RTF
(formats propriétaires). Utilisez des formats libres comme txt, html, ou
OpenOffice.Org, ou un format ouvert comme PDF. Merci. Voir
http://www.gnu.org/philosophy/no-word-attachments.fr.html
Avatar
Fos Pat
Fabrice Delente wrote:
<input type=button value="Voir une indication"
onclick="voirUneIndication()"> <script type="text/javascript"
encoding="text/iso8859-1">
var montreIndication=0;

function voirUneIndication() {
if(montreIndication==0) {
montreIndication=1;

document.getElementById('indication').style.display='visible'; }
else {
montreIndication=0;
document.getElementById('indication').style.display='none';
}
}
</script>



Question pour les puristes:

Ne préférez vous pas utiliser une librairie type prototype et réduire le
code à ceci:
<input type=button value="Voir une indication"
onclick="$('indication').toggle()";>
Avatar
Pascal PONCET
Fos Pat a écrit :
Question pour les puristes:

Ne préférez vous pas utiliser une librairie type prototype et réduire le
code à ceci:
<input type=button value="Voir une indication"
onclick="$('indication').toggle()";>



Bonjour,

Puriste, je ne sais pas, mais voilà ce que je peux en dire :

1. D'abord, il faut rester poli (toggle toi-même ;-) ).

2. Par rapport au code d'origine, je n'utiliserais pas de variable
globale (montreIndication), c'est toujours risqué.
Je n'utiliserais pas non plus le changement de style (display), mais un
changement de classe, c'est plus cohérent avec CSS.

3. Je ne mettrais pas de "onclick" sur le champ, mais un id.
Un script initialisera toutes les gestions d'évènement pour la page
concernée, genre :

window.onload = function(
// la fonction "buttonAction" serait définie ailleurs.
document.getElementById(buttonId).onclick = buttonAction;
// etc. pour chaque évènement à gérer.
)

4. Une biblio, pourquoi pas, mais limitée aux fonctions vraiment
utilisées pour éviter l'obésité, et là ça devient tout de suite galère
avec les "scriptaculous" et consort.

5. En fait, je miserais plutôt sur une biblio perso, avec des fonctions
simples et facilement portables sur tout navigateur (donc pas de
l'esbroufe "flash like" comme la tendance le montre).

Cordialement,
Pascal
Avatar
SAM
Le 5/1/09 4:58 PM, Pascal PONCET a écrit :
Fos Pat a écrit :
Question pour les puristes:

Ne préférez vous pas utiliser une librairie type prototype et réduire le
code à ceci:
<input type=button value="Voir une indication"
onclick="$('indication').toggle()";>





Non moi je préfère : onclick="clicClac(this)"

Bonjour,



Bonjour,

Puriste, je ne sais pas, mais voilà ce que je peux en dire :

1. D'abord, il faut rester poli (toggle toi-même ;-) ).

2. Par rapport au code d'origine, je n'utiliserais pas de variable
globale (montreIndication), c'est toujours risqué.



Oui, c'est curieux ce montreIndication dont je n'ai pas bien saisi le
rôle vu qu'il suffit de savoir dans quel état est le div pour le toggler.

Je n'utiliserais pas non plus le changement de style (display), mais un
changement de classe, c'est plus cohérent avec CSS.



Ça se tient.

3. Je ne mettrais pas de "onclick" sur le champ, mais un id.
Un script initialisera toutes les gestions d'évènement pour la page
concernée, genre :



Bon, on pourra dire que c'était pour ne pas encombrer le post et bien
situer où ça se passait ?

window.onload = function(



Attention !
Il y en peut-être déjà un autre de prévu de window.onload !?
Préférer les ajouts d'events (dont et à propos le load de la window).

// la fonction "buttonAction" serait définie ailleurs.
document.getElementById(buttonId).onclick = buttonAction;
// etc. pour chaque évènement à gérer.
)

4. Une biblio, pourquoi pas, mais limitée aux fonctions vraiment
utilisées pour éviter l'obésité, et là ça devient tout de suite galère
avec les "scriptaculous" et consort.



Surtout juste pour un inter à balancier sur un élément unique.

5. En fait, je miserais plutôt sur une biblio perso, avec des fonctions
simples et facilement portables sur tout navigateur (donc pas de
l'esbroufe "flash like" comme la tendance le montre).



Tout le monde n'a pas encore de Flash-bloqueur ?
Ce n'est pas encore inclus par défaut dans les navigateurs ?
Méhouvaton ? !

Cordialement,
Pascal



Et très bonne journée
--
sm