Discussion :

[calitom]

Bonjour,

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

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

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

[TSalm]

mmmh, dans ton script, les variables cordelette_interieure et image_cordelette ne sont pas définies !?

[calitom]

ce ne sont pas des variables, ce sont les id de mes div...

[calitom]

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

[Auteur]

et pour alléger ton code :

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
 
<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.

[TSalm]

bha de rien

[calitom]

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

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
 
<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?...

[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...

[milan]

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.

[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+

[Auteur]

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

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function init()
{
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>
 
</head>
 
<body onload="init()">
 
 
 
</body>
 
</html>

[fadex]

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