Question portant sur du code JAVASCRIPT (simple)

Version imprimable

Bonjour,

voici le code que j'utilise pour afficher/masquer une zone de texte ou n'importe quoi d'autre d'ailleurs.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <script type="text/javascript"> function affCache(idDiv) { var div = document.getElementById(idDiv); if (div.style.display == "") div.style.display = "none"; else div.style.display = ""; } function affCacheHidden(idDiv) { var div = document.getElementById(idDiv); if (div.style.visibility == "") div.style.visibility = "hidden"; else div.style.visibility = ""; } function affCacheV(idDiv) { var div = document.getElementById(idDiv); if (div.style.width == "") div.style.width = "0"; else div.style.width = ""; } </script> <input type="button" onclick="affCache('div1');" value="affCache('div1')"/> <div id="div1"> LE TEXTE QUI APPARAIT/DISPARAIT EST CELUI - CI :-) </div>
Le petit soucis c'est quand j'ouvre la page. le bouton apparaît et la zone de texte en dessous également !

je voudrais que seul le bouton apparaisse et que quand je clique dessus alors le tout apparaisse. Parce que sinon on a l'impression que la page est surchargée dès le début.

Je cherche en fait une commande du genre
Code:

1 2 defaut value = "hidden"
Je vous remercie d'avance !

:)

24/04/2012, 16h41
bob633
Dans ta feuille css, tu rajoutes :

Code:

#div1 { display:none; }

Si tu veux absolument passer par ton javascript, il te faut alors une fonction qui sera lancer à l'affichage de ta page. Tu peux faire ca dans ton body :

Code:

<body onload="MasquerDiv();"

Tu rajoutes une fonction js en dessous des autres :
Code:

1 2 3 function MasquerDiv(){ document.getElementById('div1').style.display = "none"; }
Mais autant passer par le css, ca limite déjà le fait que le user est désactivé le js :mrgreen:
25/04/2012, 09h30
Globolite

bob633 tu gères !

Ah c'est dommage c'était presque ça !

Je t'explique :

En ce qui concerne te première méthode, je ne sais pas la mettre en place, cependant ta second méthode marche très bien, mais avec un petit bémol.

Ca marche lorsque par exemple j'essaie avec un seul body genre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script type="text/javascript"> function affCache(idDiv) { var div = document.getElementById(idDiv); if (div.style.display == "") div.style.display = "none"; else div.style.display = ""; } function MasquerDiv() { document.getElementById('div1').style.display = "none"; } </script> <input type="button" onclick="affCache('div1');" value="affCache('div1')"/> <div id="div1"><body onload="MasquerDiv();" LE TEXTE QUI APPARAIT/DISPARAIT EST CELUI - CI :-) </body></div>
Jusque là ça marche. Maintenant le même code mais avec deux boutons qui chacun font apparaître leur objet et là c'est comme ci la fonction que l'on utilise ne peut s'appliquer qu'à l'un des deux. Pour y remédier j'ai changé le nom de la fonction et ai fait attention aux Id utilisés. Mais rien à y faire.

En connais - tu la raison ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <script type="text/javascript"> function affCache(idDiv) { var div = document.getElementById(idDiv); if (div.style.display == "") div.style.display = "none"; else div.style.display = ""; } function MasquerDiv() { document.getElementById('div2').style.display = "none"; } </script> <input type="button" onclick="affCache('div1');" value="BOUTON 1"/> <div id="div1"><body onload="MasquerDiv();" LE TEXTE QUI APPARAIT/DISPARAIT EST CELUI - CI :-) </body></div> <script type="text/javascript"> function affCache(idDiv) { var div = document.getElementById(idDiv); if (div.style.display == "") div.style.display = "none"; else div.style.display = ""; } function MasquerDiv2() { document.getElementById('div1').style.display = "none"; } </script> <input type="button" onclick="affCache('div1');" value="BOUTON 2"/> <div id="div1"><body onload="MasquerDiv2();" LE TEXTE QUI APPARAIT/DISPARAIT EST CELUI - CI :-) </body></div>

25/04/2012, 10h34
Globolite

résolu !

il suffit simplement d'ajouter avec <div id="div1" style="display:none">

et ainsi de suite pour chaque objet ...