Rendre visible ou invisible une Div

Version imprimable

16/04/2013, 15h02
Vanessa48

Rendre visible ou invisible une Div

Bonjour
Je ne comprends pas pour rendre visible une Div en javascript c'est bien :

Code:

document.getElementById('MatFabrication').style.display='block';

et pour la rendre invisible :

Code:

document.getElementById('MatFabrication').style.display='none';

Cela ne fonctionne pas

moi j’utiliserai sa

Code:

1
2
 
document.getElementById(MatFabrication).style.visibility=(true)?'visible':'hidden';

J'ai trois DIv, donc ce serait comme cela ?

Code:

1
2
3
document.getElementById(MatFabrication).style.visibility=(true)?'visible':'hidden';
      document.getElementById(AssFabrication).style.visibility=(false)?'visible':'hidden';
      document.getElementById(MatMetrologie).style.visibility=(false)?'visible':'hidden';

Voici mon code complet :

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
function Smachine()  {
     if(document.getElementById('Matériel de fabrication').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/OKUMA_3.jpg"> ';
      document.getElementById('NomMach').innerHTML='OKUMA';
      document.getElementById('MatFabrication').style.display='block';
      document.getElementById('AssFabrication').style.display='none';
      document.getElementById('MatMetrologie').style.display='none';
     }
     if(document.getElementById('Assistance à la fabrication').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/A7.jpg"> ';
      document.getElementById('NomMach').innerHTML='MASTERCAM';
      document.getElementById('MatFabrication').style.display='none';
      document.getElementById('AssFabrication').style.display='block';
      document.getElementById('MatMetrologie').style.display='none';
     }
     if(document.getElementById('Matériel de métrologie').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/CONT1.jpg"> ';
      document.getElementById('NomMach').innerHTML='ZEISS';
      document.getElementById('MatFabrication').style.display='none';
      document.getElementById('AssFabrication').style.display='none';
      document.getElementById('MatMetrologie').style.display='block';
      }
}

L'image et les textes s'affichent
Mais les DIV ne s'affichent pas, je ne vois vraiment pas pourquoi
Pouvez-vous m'aider

16/04/2013, 17h11
Bovino

Code:

if(document.getElementById('Matériel de fabrication').checked)

Tu as vraiment mis Matériel de fabrication comme id à un élément ??? :cry:

:no:

Oui, voici mon code :

Code:

1
2
3
4
5
<div id="Itype">
<input name="Type" id="Matériel de fabrication" type="radio" value="Matériel de fabrication" checked="checked"  onclick="Smachine();" />Matériel de fabrication
<input name="Type" id="Assistance à la fabrication" type="radio" value="Assistance à la fabrication"  onclick="Smachine();" />Assistance à la fabrication
<input name="Type" id="Matériel de métrologie" type="radio" value="Matériel de métrologie"  onclick="Smachine();" />Matériel de métrologie
</div>

Et mes trois DIV :

Code:

1
2
3
4
5
6
7
8
9
<div id="MatFabrication" style="display:none;">
.........................
</div>
<div id="AssFabrication" style="display:none;">
.........................
</div>
<div id="MatMetrologie" style="display:none;">
.........................
</div>

16/04/2013, 17h46
mainContainer
Je suis, tout comme Bovino, assez halluciné par tes ID, c'est tout ce qu'il ne faut pas faire:
- Des espaces
- Des caractères accentués
impossible que ça fonctionne. Je n'ai pas regardé d'avantage mais rien que ça c'est une erreur qui bloque le fonctionnement.

il y a deux écoles:
underscore
materiel_de_fabrication
camelCase
materielDeFabrication
on évite généralement le hyphen:
materiel-de-fabrication

Sans partir dans des considérations sémantiques il est aussi indispensable de raccourcir la longueur de ses ID.

EDIT: en me relisant j'ai remarqué une belle ânerie... désormais corrigée. :roll:

J'ai modifié les ID comme ceci et les DIV ne s'affichent toujours pas

Code:

1
2
3
4
5
<div id="Itype">
    <input name="Type" id="Matériel_fabrication" type="radio" value="Matériel_fabrication" checked="checked"  onclick="Smachine();" />Matériel de fabrication
    <input name="Type" id="Assistance_fabrication" type="radio" value="Assistance_fabrication"  onclick="Smachine();" />Assistance à la fabrication
    <input name="Type" id="Matériel_métrologie" type="radio" value="Matériel_métrologie"  onclick="Smachine();" />Matériel de métrologie
</div>

16/04/2013, 19h46
mainContainer

il y a encore des accents dans tes ID.
Et pas la peine de mettre des underscore à tes values

J'ai fait les modifs suivantes :

Code:

1
2
3
4
5
<div id="Itype">
<input name="Type" id="Mat_fabrication" type="radio" value="Materielfabrication" checked="checked"  onclick="Smachine();" />Matériel de fabrication
<input name="Type" id="Ass_fabrication" type="radio" value="Assistancefabrication"  onclick="Smachine();" />Assistance à la fabrication
<input name="Type" id="Mat_metrologie" type="radio" value="Materielmetrologie"  onclick="Smachine();" />Matériel de métrologie
</div>

Et :

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
<script type="text/javascript">
function Smachine()  {
     if(document.getElementById('Mat_fabrication').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/OKUMA_3.jpg"> ';
      document.getElementById('NomMach').innerHTML='OKUMA';
      document.getElementById('MatFabrication').style.display='block';
      document.getElementById('AssFabrication').style.display='none';
      document.getElementById('MatMetrologie').style.display='none';
     }
     if(document.getElementById('Ass_fabrication').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/A7.jpg"> ';
      document.getElementById('NomMach').innerHTML='MASTERCAM';
      document.getElementById('MatFabrication').style.display='none';
      document.getElementById('AssFabrication').style.display='block';
      document.getElementById('MatMetrologie').style.display='none';
     }
     if(document.getElementById('Mat_metrologie').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/CONT1.jpg"> ';
      document.getElementById('NomMach').innerHTML='ZEISS';
      document.getElementById('MatFabrication').style.display='none';
      document.getElementById('AssFabrication').style.display='none';
      document.getElementById('MatMetrologie').style.display='block';
      }
}
</script>

Mes images et les textes s'affichent
par contre les DIV ne s'affichent pas

Je ne vois vraiment pas pourquoi j'ai beau lire et relire je ne trouve pas l'erreur

17/04/2013, 11h40
Kaamo

Tu n'as pas posté tout le code ... mais si tes div ont les id MatFabrication, AssFabrication et MatMetrologie c'est censé fonctionner.

Oui mes div sont :

Code:

1
2
3
4
5
6
7
8
9
<div id="MatFabrication" style="display:none;">
.........................
</div>
<div id="AssFabrication" style="display:none;">
.........................
</div>
<div id="MatMetrologie" style="display:none;">
.........................
</div>

Et cela ne fonctionne pas

17/04/2013, 11h59
Kaamo

Exemple : http://jsfiddle.net/xPEmf/
Pourtant, comme tu peux le voir dans l'exemple, ça fonctionne.

Post tout ton code, il y a forcément un problème en dehors de ce que tu nous montres. Vérifie que ces trois div ne soient pas dans une div non affichée par exemple.
Est-ce qu'il y a des erreurs de script dans la page ? (à voir dans la console)

Oui dans l'exemple ca fonctionne, je ne comprend pas
Voici la totalité de 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
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
<head> 
<title></title> 
<script type="text/javascript">
function Smachine()  {
     if(document.getElementById('Mat_fabrication').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/OKUMA_3.jpg"> ';
      document.getElementById('NomMach').innerHTML='OKUMA';
      document.getElementById('MatFabrication').style.display='block';
      document.getElementById('AssFabrication').style.display='none';
      document.getElementById('MatMetrologie').style.display='none';
     }
     if(document.getElementById('Ass_fabrication').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/A7.jpg"> ';
      document.getElementById('NomMach').innerHTML='MASTERCAM';
      document.getElementById('MatFabrication').style.display='none';
      document.getElementById('AssFabrication').style.display='block';
      document.getElementById('MatMetrologie').style.display='none';
     }
     if(document.getElementById('Mat_metrologie').checked)
   	 {
      document.getElementById('Isecteur').innerHTML='<img src="images/Machines/CONT1.jpg"> ';
      document.getElementById('NomMach').innerHTML='ZEISS';
      document.getElementById('MatFabrication').style.display='none';
      document.getElementById('AssFabrication').style.display='none';
      document.getElementById('MatMetrologie').style.display='block';
      }
}
 
 
</script>
 
</head> 
<body> 
	<table style="width: 700px; height: auto;" >
        <tr>
            <td align="center">
                <table style="border: 4px solid #2A3E72; width: 500px">
                    <tr>
                        <td colspan="2" 
                            style="background-color: #2A3E72; color: #C0C0C0; font-size: 16px; font-weight: bold; text-align:center">
                            NOTRE PARC MACHINES
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                        <div id="Itype">
                            <input name="Type" id="Mat_fabrication" type="radio" value="Materielfabrication" checked="checked"  onclick="Smachine();" />Matériel de fabrication
                            <input name="Type" id="Ass_fabrication" type="radio" value="Assistancefabrication"  onclick="Smachine();" />Assistance à la fabrication
                            <input name="Type" id="Mat_metrologie" type="radio" value="Materielmetrologie"  onclick="Smachine();" />Matériel de métrologie
                         </div>   
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table id="TbPresente"  class="style1">
                                <tr>
                                    <td style="width: 188px" align="center">
                                    <div id="Isecteur">
                            			<img src="images/Machines/OKUMA_3.jpg" />
                            			<p id="Mach">Bi broche axe B avec ravitailleur<br />Passage broche Dia 65</p><br />
                            			<p id="NomMach">OKUMA</p>
									</div>
                        			</td>
                        			<td style="width: 312px">
                           				 <table class="style1">
                                			<tr>
                                    			<td align="center" style="padding-bottom: 5px; font-weight: bold; text-decoration: underline overline;">
 
                                    			</td>
                                			</tr>
                                			<tr>
                                    			<td align="left" style="padding-bottom: 5px; padding-left: 10px">
                                     			<div id="MatFabrication" style="display:none;">
                                     			<input name="Fabrication" id="Tour1" type="radio" value="Centretournage" checked="checked" onclick="SMatFab();" />Centre de tournage<br />
                                     			<input name="Fabrication" id="Tour2" type="radio" value="TourCN6axes" onclick="SMatFab();" />Tour CN 6 axes<br />
                                     			<input name="Fabrication" id="Tour3" type="radio" value="TourCN4axesEP600" onclick="SMatFab();" />Tour CN 4 axes EP 600<br />
                                     			<input name="Fabrication" id="Tour4" type="radio" value="TourCN4axesEP1000" onclick="SMatFab();" />Tour CN 4 axes EP 1000<br />
                                     			<input name="Fabrication" id="Tour5" type="radio" value="TourCNEP600" onclick="SMatFab();" />Tour CN EP 600<br />
                                     			<input name="Fabrication" id="Tour6" type="radio" value="TourCNEP1150" onclick="SMatFab();" />Tour CN EP 1150<br />
                                     			<input name="Fabrication" id="CU1" type="radio" value="Centreusinage4axes" onclick="SMatFab();" />Centre d'usinage 4 axes<br />
                                     			<input name="Fabrication" id="CU2" type="radio" value="Centreusinage4axesUGV" onclick="SMatFab();" />Centre d'usinage 4 axes UGV<br />
                                     			<input name="Fabrication" id="CU3" type="radio" value="Centreusinage5axesUGV" onclick="SMatFab();" />Centre d'usinage 5 axes UGV<br />
                                     			<input name="Fabrication" id="CU4" type="radio" value="Centreusinage5axesUGV1" onclick="SMatFab();" />Centre d'usinage 5 axes UGV<br />
                                     			<input name="Fabrication" id="EE" type="radio" value="Electroérosion" onclick="SMatFab();" />Electro-érosion<br />
                                     			<input name="Fabrication" id="SA" type="radio" value="Scieautomatique" onclick="SMatFab();" />Scie automatique<br />
                                     			</div>
                                     			<div id="AssFabrication" style="display:none;">
                                     			<input name="Assistance" id="Station_FAO_2D" type="radio" value="StationFAO2DetED" checked="checked" onclick="SAssFab();" />Station FAO 2D et ED<br />
                                     			<input name="Assistance" id="Station_FAO" type="radio" value="StationFAO Tournage4axeselectrofil" onclick="SAssFab();" />Station FAO Tournage 4 axes, électrofil<br />
                                     			<input name="Assistance" id="Station_CAO" type="radio" value="StationCAO2DetED" onclick="SAssFab();" />Station CAO 2D et ED<br />
                                     			</div>
                                     			<div id="MatMetrologie" style="display:none;">
                                     			<input name="Metrologie" id="Machine_tridimensionnelle" type="radio" value="Machineàmesurertridimensionnelle" checked="checked" onclick="SMatMet();" />Machine à mesurer tridimensionnelle<br />
                                     			<input name="Metrologie" id="Machine_tridimensionnelle1" type="radio" value="Machineàmesurertridimensionnelle1" onclick="SMatMet();" />Machine à mesurer tridimensionnelle<br />
                                     			<input name="Metrologie" id="Projecteur_profil" type="radio" value="Projecteurdeprofilaveccalculateur" onclick="SMatMet();" />Projecteur de profil avec calculateur<br />
                                     			<input name="Metrologie" id="Colonne_contrôle" type="radio" value="Colonnedecontrôle" onclick="SMatMet();" />Colonne de contrôle<br />
                                     			<input name="Metrologie" id="Colonne_contrôle1" type="radio" value="Colonnedecontrôle1" onclick="SMatMet();" />Colonne de contrôle<br />
                                     			</div>   
                                    		</td>
                                 		</tr>
                                	</table>
                        		</td>
                    		</tr>
                    		<tr>
                        		<td colspan="2" align="center" style="padding-top: 10px; padding-bottom: 10px; padding-left: 10px;text-align:center">
                            	<p id="Specifi">Bi broche axe B avec ravitailleur Passage broche Dia 65</p>
                       			</td>
                    		</tr>
                    		<tr>
                        		<td colspan="2" style="border: thin solid #7B7DA3;text-align:center">
                            		Type de pièces fabriquées avec cette machine
                            	</td>
                    		</tr>
                    		<tr>
                        		<td colspan="2" style="border: thin solid #7B7DA3;text-align:center">
                            		<img src="images/Materiel/P1.jpg" />
                            		<img src="images/Materiel/P2.jpg" />
                            		<img src="images/Materiel/P3.jpg" />
 
                        		</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                </table>
            </td>
        </tr>
    </table>
 
 
</body> 
</html>

17/04/2013, 15h33
Kaamo

Il faut vraiment avoir le réflexe d'ouvrir la console développeur (Ctrl+Shit+K sous Firefox, F12 sous chrome) pour voir ce qui se passe !

Tu fais en premier dans le script : document.getElementById('Isecteur').innerHTML='<img src="images/Machines/CONT1.jpg"> ';Que se passe - t-il suite à ça ? Tu écrases complétement le contenu de la div et par la même occasion ton élément "NomMach" que tu souhaites modifier juste après. Comme cet élément n'existe plus => erreur du script ! (explicitement signalé dans la console développeur du navigateur).

Pour y remédier :
- Donne un ID à ton image et modifie le src directement : document.getElementById('MonImage').src='images/Machines/CONT1.jpg';
17/04/2013, 16h33
Vanessa48

Merci pour ton aide, c'est enfin OK
Quel soulagement