[javascript] Probleme visibility

**samtheh** · 30/11/2005, 16h43

Bonjour a tous,

Je voudrais afficher a la demande plusieurs elements d'un formulaire.
Voici ma fonction en 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
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.

**SpaceFrog** · 30/11/2005, 16h46

Code :

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

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

**samtheh** · 30/11/2005, 16h48

Je viens de tester, cela ne change rien....

**SpaceFrog** · 30/11/2005, 16h52

et dans le code html ils ont un style visibility ou display initialisé ?

**samtheh** · 30/11/2005, 16h54

pas d'initialisation dans le code HTML ni pour visibility ni pour display dans aucun des DIV de ma page.

**SpaceFrog** · 30/11/2005, 16h57

ben essaye deja d'attrribuer le style dans le code html eb css par exemple

Code :

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

1
2
3
4
.hidden {display:none;
              visibility:hidden;}
 
<div class="hidden">

**samtheh** · 30/11/2005, 17h01

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

exemple dans mon code HTML (boucle PHP):

Code :

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

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

Merci en tout cas du temps que tu m'accorde.

**SpaceFrog** · 30/11/2005, 17h03

tu peux mettre le code html js complet ?

**samtheh** · 30/11/2005, 17h07

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

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
 
<?
		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";	
			}	
		?>

**SpaceFrog** · 30/11/2005, 17h08

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

**samtheh** · 30/11/2005, 17h12

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

Code :

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

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>

**SpaceFrog** · 30/11/2005, 17h17

???

ce code marche a merveille chez moi ...

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

**samtheh** · 30/11/2005, 17h26

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

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

**SpaceFrog** · 30/11/2005, 17h30

a quel moment et comment appeles tu la fonction ?

**samtheh** · 30/11/2005, 17h36

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

**samtheh** · 30/11/2005, 17h56

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

Voici le code de toute la page :

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