Faire apparaître et disparaître une div

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Y a personne
Le #19186781
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'.
Le #19187341
Y a personne
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
Fos Pat
Le #19229421
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()";>
Pascal PONCET
Le #19238181
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
SAM
Le #19241891
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
Publicité
Poster une réponse
Anonyme