Discussion :

[Vanessa48]

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

Code :

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

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

et pour la rendre invisible :

Code :

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

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

Cela ne fonctionne pas

[bjo393]

moi j’utiliserai sa

Code :

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

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

[Vanessa48]

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

Code :

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

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

[Vanessa48]

Voici mon code complet :

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

[Bovino]

Code :

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

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

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

[Vanessa48]

Oui, voici mon code :

Code html :

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

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

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

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>

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

[Vanessa48]

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

Code html :

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

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>

[mainContainer]

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

[Vanessa48]

J'ai fait les modifs suivantes :

Code html :

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

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 :

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

[Kaamo]

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

[Vanessa48]

Oui mes div sont :

Code :

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

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

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

[Vanessa48]

Oui dans l'exemple ca fonctionne, je ne comprend pas
Voici la totalité de 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
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>

[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';

[Vanessa48]

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