Question portant sur du code JAVASCRIPT (simple)

**Globolite** · 24/04/2012, 14h39

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
defaut value = "hidden"

Je vous remercie d'avance !

**bob633** · 24/04/2012, 16h41

Dans ta feuille css, tu rajoutes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="MasquerDiv();"

Tu rajoutes une fonction js en dessous des autres :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Globolite** · 25/04/2012, 09h30

bob633 tu gères !

**Globolite** · 25/04/2012, 10h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Globolite** · 25/04/2012, 10h34

résolu !

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

et ainsi de suite pour chaque objet ...

Question portant sur du code JAVASCRIPT (simple)

Conception Web

Vue hybride

Discussions similaires

Partager

Partager