afficher cacher div

Version imprimable

afficher cacher div

Bonjour,

Je cherche a afficher ou masquer des div, et ca ne marche pas...
Voici mon code:

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
 
......
 
<table id="imagetapis" width="284" height="250" border="0" cellspacing="0" cellpadding="0" style="background-image:url(/images/tapis/I.jpg);">
        <tr>
          <td valign="bottom">
            <table width="284" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>&nbsp;</td>
              </tr>
              <div id="cordelette_interieure">
              <tr>
                <td><img align="bottom" alt="" border="0"  width="284" id="cord_int" name="cord_int" src="/images/tapis/17.jpg"></td>
              </tr>
              </div>
              <div id="cordelette_exterieure">
              <tr>
                <td><img align="bottom" alt="" border="0"  width="284" id="cord_ext" name="cord_ext" src="/images/tapis/38.jpg"></td>
              </tr>
              </div>
              <tr>
                <td><img align="bottom" alt="" border="0" height="40" width="284" id="bordure" name="bordure" src="/images/tapis/R.jpg"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
 
.........
<div id="image_cordelette">
  <tr>
    <td colspan="2" align="center"><img align="bottom" alt="" border="0" id="corde" name="corde" src="/images/tapis/cordelettesRG.jpg" usemap="#Map2" ismap></td>
  </tr>
  </div>
</table>

Et le javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script language="JavaScript">
var id_prod=document.getElementById('id3').value;
 
if(id_prod==753)
{
	document.getElementById(cordelette_interieure).style.visibility='hidden';
	document.getElementById(cordelette_interieure).style.display='none';	
}
if(id_prod==754)
{
    document.getElementById(cordelette_interieure).style.visibility='hidden';
    document.getElementById(cordelette_interieure).style.display='none';
    document.getElementById(cordelette_exterieure).style.visibility='hidden';
    document.getElementById(cordelette_exterieure).style.display='none';
    document.getElementById(image_cordelette).style.visibility='hidden';
    document.getElementById(image_cordelette).style.display='none';
}
</script>

Pourquoi ca ne marche pas?
J'ai besoin d'aide car je comprend pas trop....
Merci d'avance

05/03/2007, 18h14
TSalm

mmmh, dans ton script, les variables cordelette_interieure et image_cordelette ne sont pas définies !?
05/03/2007, 18h39
calitom

ce ne sont pas des variables, ce sont les id de mes div...
05/03/2007, 18h40
calitom

ah merde!!!
Je viens de me rendre compte que j'avais oublié les guillemets!!
merci de ta réponse!!

et pour alléger ton code :

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
 
<script language="JavaScript">
var id_prod=document.getElementById('id3').value;
 
var objCordeInt, objCordeExt, imgCorde;
objCordeInt = document.getElementById("cordelette_interieure");
objCordeExt = document.getElementById("cordelette_exterieure");
imgCorde = document.getElementById("image_cordelette");
 
if(id_prod==753)
{
	objCordeInt.style.visibility='hidden';
	objCordeInt.style.display='none';	
}
if(id_prod==754)
{
    objCordeInt.style.visibility='hidden';
    objCordeInt.style.display='none';
 
    objCordeExt.style.visibility='hidden';
    objCordeExt.style.display='none';
 
    imgCorde.style.visibility='hidden';
    imgCorde.style.display='none';
}
</script>

Par ailleurs pourquoi utilises-tu à la fois visibility et display ? Sois l'une soit l'autre, utiliser les deux est sans intéret.

05/03/2007, 23h12
TSalm

bha de rien :D

Je viens de mettre a jour mon code, et ca ne marche toujours pas...
Voici mon code mis a jour:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script language="JavaScript">
var id_prod=document.getElementById('id3').value;
 
var objCordeInt, objCordeExt, imgCorde;
objCordeInt = document.getElementById("cordelette_interieure");
objCordeExt = document.getElementById("cordelette_exterieure");
imgCorde = document.getElementById("image_cordelette");
 
if(id_prod==753)
{
	objCordeInt.style.display='none';	
}
if(id_prod==754)
{
    objCordeInt.style.display='none';
    objCordeExt.style.display='none';
    imgCorde.style.display='none';
}
</script>

Pourquoi ca ne marche pas?...

06/03/2007, 10h14
calitom

Est ce que ca peut venir du fait que mes div sont inclus dans des tableaux et qu'ils supprime des ligne <tr> de tableau?

Je fais des suppositions, car là je vois plus trop où chercher...
06/03/2007, 10h19
milan

Citation:

var id_prod=document.getElementById('id3').value;

Là tu demandes la valeur de ton ID

Mais comme ton script doit probablement être placé en en-tête et ton element ID dans la page, ça ne peut pas le faire (car il n'y a pas d'appel au script depuis la page.

Alors, en gardant tout comme ça, moi j'essearai de déclarer tous mes ID et leur valeur de base (c'est-à-dire telle que les DIV doivent s'afficher - valeur de display) dans une css placée AU_DESSUS du script.
06/03/2007, 10h26
E.Bzz

Pour éviter d'avoir à faire des suppositions sur l'ordre de chargement des objets de la page (aléatoire), fais-en une fonction, et lance la sur le onload du body.

A+

Citation:

Envoyé par E.Bzz

Pour éviter d'avoir à faire des suppositions sur l'ordre de chargement des objets de la page (aléatoire), fais-en une fonction, et lance la sur le onload du body.

A+

+1

Si ton script est dans le head de la page, tu exécutes la fonction avant que tes éléments HTML soient chargés donc tes getElementById() renvoient null. Fais comme te le conseille E.Bzz : place ton script dans une fonction que tu exécutes sur l'événement onload :
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 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body onload="init()"> </body> </html>

06/03/2007, 11h35
fadex

utiliser un Débuggeur Javascript FireBug pour voire c il y a des messages d'erreurs