[javascript] Probleme visibility

Version imprimable

Bonjour a tous,

Je voudrais afficher a la demande plusieurs elements d'un formulaire.
Voici ma fonction en javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function function_select(i) { if(i==0) { for(x=1; x<20; x++) { var monElement = document.getElementById('article_'+x); monElement.style.display = 'none'; monElement.style.visibility = 'hidden'; alert(monElement.style.visibility+' test sur : '+x); } } else { i = parseInt(i) + 1; for(x=1; x<i; x++) { document.getElementById('article_'+x).style.visibility='visible'; } } }
A la fin du chargement de ma page HTML j'appel ma fonction avec en argument 0. Dans tous les alert je retrouve bien la valeur hidden cependant tous mes Element restent visible.
Je ne comprend pas.

Je ne rappel pas ma fonction entre temps. Les id des mes Elements sont bien places, et orthographie de la meme maniere.
Mes Element sont des <div>. J'utilise d'autres <div> englobant le tout pour ma mise en page, dans ceux-ci aucun appel a visibility.

J'ai teste sous firefox et sous IE, meme resultat.

Si quelqu'un a une idée pour m'eclairer ?

Je vous remercie de vos réponses.

30/11/2005, 16h46
SpaceFrog
Code:

1 2 monElement.style.display = 'none'; monElement.style.visibility = 'hidden';
si il est en display:none il n'est pas dans le flux de la page ...
pass le d'abord en display='' ou 'block'
puis rend le visible ...
30/11/2005, 16h48
samtheh

Je viens de tester, cela ne change rien....
30/11/2005, 16h52
SpaceFrog

et dans le code html ils ont un style visibility ou display initialisé ?
30/11/2005, 16h54
samtheh

pas d'initialisation dans le code HTML ni pour visibility ni pour display dans aucun des DIV de ma page.
30/11/2005, 16h57
SpaceFrog
ben essaye deja d'attrribuer le style dans le code html eb css par exemple
Code:

1 2 3 4 .hidden {display:none; visibility:hidden;} <div class="hidden">
30/11/2005, 17h01
samtheh

Je viens d'essayer cela ne change rien mes elements restent visible:

exemple dans mon code HTML (boucle PHP):

Code:

<div id="article_10" style="display:none; visibility:hidden;">

Merci en tout cas du temps que tu m'accorde.
30/11/2005, 17h03
SpaceFrog

tu peux mettre le code html js complet ?

Je ne vais mettre que ma boucle en PHP, le code JS est le meme qu'au dessus:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<?
		if($nb>0)
		{	
			for($y=1;$y<20;$y++)
			{
				echo "\n<div id=\"article_".$y."\" style=\"display:none; visibility:hidden;\"><tr>";
				echo "<td>";
					echo "Choisir l'article numéro ".$y." : ";
				echo "</td>";
				echo "<td>";
					echo "\n<select name=\"article_".$y."\" >";
					echo "<option value=0>Choix</option>";
					for($w=0;$w<$nb;$w++)
					{
    		 				echo "\n<option value=".$id_article_tab[$w].">".$titre_tab[$w]."</option>";
 
					}
					echo "\n</select>";
				echo "</td>";
				echo "</tr></div>\n";	
			}	
		?>

30/11/2005, 17h08
SpaceFrog

ça le donne rien je ne connais pas php ...

donne moi un exemple de code html avec la structure de ton form avec les divs ...

Voici le code HTML généré (pour deux tours de boucle) :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div id="article_1" style="display:none; visibility:hidden;"><tr><td>Choisir l'article numéro 1 : </td><td>
<select name="article_1" ><option value=0>Choix</option>
<option value=1>Premier article</option>
</select></td></tr></div>
 
<div id="article_2" style="display:none; visibility:hidden;"><tr><td>Choisir l'article numéro 2 : </td><td>
<select name="article_2" ><option value=0>Choix</option>
 
<option value=1>Premier article</option>
</select></td></tr></div>

???

ce code marche a merveille chez moi ...

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
 
<script type='text/javascript'>
function function_select(i)
{
   if(i==0)
   {
   for(x=1; x<3; x++)
   {   
      var monElement = document.getElementById('article_'+x);
       monElement.style.display = 'none';
       monElement.style.visibility = 'hidden';
      alert(monElement.style.visibility+' test sur : '+x);
   }
   }
   else
   {
        i = parseInt(i) + 1;
 
   for(x=1; x<i; x++)
   {
   		document.getElementById('article_'+x).style.display=''
      document.getElementById('article_'+x).style.visibility='visible';
   }
   }
} 
 
</script>
</head>
 
<body onload="function_select(2)">
<div id="article_1" style="display:none; visibility:hidden;">
	<table>
		<tr><td>Choisir l'article numéro 1 : </td><td>
<select name="article_1" ><option value=0>Choix</option>
<option value=1>Premier article</option>
</select></td></tr>
 
<div id="article_2" style="display:none; visibility:hidden;"><tr><td>Choisir l'article numéro 2 : </td><td>
<select name="article_2" ><option value=0>Choix</option>
 
<option value=1>Premier article</option>
</select></td></tr> 
</body>

Je ne comprend rien. En essayant ceci qui est beaucoup plus proche de mon code et en virant tout le superflu ca marche :

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
48
49
50
51
52
53
54
55
56
 
<script type='text/javascript'>
function function_select(i)
{
   if(i==0)
   {
   for(x=1; x<3; x++)
   {   
      var monElement = document.getElementById('article_'+x);
       monElement.style.display = 'none';
       monElement.style.visibility = 'hidden';
      alert(monElement.style.visibility+' test sur : '+x);
   }
   }
   else
   {
        i = parseInt(i) + 1;
 
   for(x=1; x<i; x++)
   {
         document.getElementById('article_'+x).style.display=''
      document.getElementById('article_'+x).style.visibility='visible';
   }
   }
}
 
</script>
</head>
 
<body>
 
<select name="nb_article" onChange="javascript:function_select(this.value)">
			<option value=0>Choix</option>
			<? 
				for($i=1;$i<20;$i++)
				{
 
					echo "<option value=".$i.">".$i."</option>\n"; 
				}
			?>
			</select>
 
 
<div id="article_1" style="display:none; visibility:hidden;">
   <table>
      <tr><td>Choisir l'article numéro 1 : </td><td>
<select name="article_1" ><option value=0>Choix</option>
<option value=1>Premier article</option>
</select></td></tr>
 
<div id="article_2" style="display:none; visibility:hidden;"><tr><td>Choisir l'article numéro 2 : </td><td>
<select name="article_2" ><option value=0>Choix</option>
 
<option value=1>Premier article</option>
</select></td></tr>
</body>

30/11/2005, 17h30
SpaceFrog

a quel moment et comment appeles tu la fonction ?
30/11/2005, 17h36
samtheh

Sur le OnChange du select au-dessus, regarde le code poste juste precedement.

Je viens d'isoler le probleme cela ne me donne toujours pas la solution !

Voici le code de toute la page :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title></title>
 
 
<script type="text/javascript">
 
 
function function_select(i)
{
   if(i==0)
   {
	for(x=1; x<4; x++)
	{	
		var monElement = document.getElementById('article_'+x);
		 monElement.style.display = 'none';
		 monElement.style.visibility = 'hidden';
 
	}
   }
   else
   {
        i = parseInt(i) + 1;
 
	for(x=1; x<i; x++)
	{
		document.getElementById('article_'+x).style.display='' 
		document.getElementById('article_'+x).style.visibility='visible';
	}
   }
}
</script>
 
</head>
 
 
<body>
 
 
 
 
		<table border="0">
		<tr>
			<td>
				Saisir le nombre d'article de cette parution:
			</td>
			<td align="center">
			<select name="nb_article" onChange="javascript:function_select(this.value)">
			<option value=0>Choix</option>
			<? 
				for($i=1;$i<20;$i++)
				{
					echo "<option value=".$i.">".$i."</option>\n"; 
				}
			?>
			</select></td>
		</tr>
 
		<div id="article_1" style="display:none; visibility:hidden;"><tr><td>Choisir l'article numéro 1 : </td><td>
<select name="article_1" ><option value=0>Choix</option>
 
<option value=1>Premier article</option>
</select></td></tr></div> 
 
		<div id="article_2" style="display:none; visibility:hidden;"><tr><td>Choisir l'article numéro 2 : </td><td>
<select name="article_2" ><option value=0>Choix</option>
 
<option value=1>Premier article</option>
</select></td></tr></div>
 
		<div id="article_3" style="display:none; visibility:hidden;"><tr><td>Choisir l'article numéro 3 : </td><td>
<select name="article_3" ><option value=0>Choix</option>
 
<option value=1>Premier article</option>
</select></td></tr></div>
 
		</table>		
 
</body>
 
 
</html>

Et lorsque je fais sauter le

Code:

<table border="0">

et bien magique ca marche sinon cela ne marche plus.