Cacher des images en fonction de l'id sélectionné
Bonjour à tous et merci de passer sur ce Sujet !
Je suis actuellement en apprentissage du JS depuis quelques semaines.
Le Projet :
Une page web pour constater l'état de pièces d'avion qui arrive en magasin.
J'ai une page web que je veux adapter au maximum pour l'afficher sur un Smarphone/Tablette.
Cette page web est composé de plusieurs boutons "Radio " pour pouvoir constater l'état de ces pièces à l'arrivé de celle-ci.
Les valeurs de ces Radios boutons sont renvoyés avec du Php et s'affiche sur une autre page consultable sur pc.
J'ai rangé les radios boutons dans des fieldsets.
J'aide la constatation des pièces avec des schémas qui s'affichent en dessous dans les fieldsets des radio boutons correspondant.
Au début j'ai affiché les schémas en bas de la page en dessous des fieldset dans une div. Maintenant je les affiche directement en dessous des radios boutons correspondant (dans le fieldset plus précisement)
"Pour que sur mobile et tablette on évite devoir faire des allé-retour entre le radio bouton et le bas de la page pour le mécanicien."
Mais avant lorsque je sélectionnai un autre fieldset le schéma précédemment affiché dans la div disparaissait et le nouveau lié au fieldset sélectionné s'affichait.
Je souhaite faire la même chose avec dans le fieldset lorsqu'il est sélectionné son schéma s'affiche et lorsqu'un autre est sélectionné il disparait.
J'arrive à les faire s'afficher dans leur fieldset correspondant, mais je n'arrive pas à faire disparaitre les schémas lorsque j'en sélectionne un autre.
Actuellement le schéma reste affiché....
J'ai essayé avec une boucle For qui parcoure les div et les "vide" mais je n'y arrive vraiment pas ...
En espérant avoir été claire :/
Quelques radio boutons de la page html principale :
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
| <!DOCTYPE HTML>
<html>
<head>
<title>affichage Image</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body >
<fieldset onclick="javascript:afficherImage(this, 'img_02')"> <!-- J'ai modifié ça -->
<legend> Protection Pupille: </legend>
<input type="radio" name="protection_pupille" value="presente" id="pupille_presente"/> <label for="pupille_presente">PRESENTE</label> <br/>
<input type="radio" name="protection_pupille" value="absente" id="pupille_absente"/> <label for="pupille_absente">ABSENTE</label> <br/>
<div class="affichageImage"></div> <!-- J'ai modifié ça -->
</fieldset>
<fieldset onclick="javascript:afficherImage(this, 'img_06')">
<legend> Embouts coolanol: </legend>
<input type="radio" name="embouts_coolanol" value="bon" id="embouts_coolanol_bon"/> <label for="embouts_coolanol_bon">BON</label> <br/>
<input type="radio" name="embouts_coolanol" value="mauvais" id="embouts_coolanol_mauvais"/> <label for="embouts_coolanol_mauvais">MAUVAIS</label> <br/>
<input type="radio" name="embouts_coolanol" value="abime" id="embouts_coolanol_abime"/> <label for="embouts_coolanol_abime">ABIME</label> <br/>
<div class="affichageImage"></div>
</fieldset>
<fieldset onclick="javascript:afficherImage(this, 'img_08')">
<legend> Vidange coolanol: </legend>
<input type="radio" name="vidange_coolanol" value="effectuee" id="vidange_coolanol_effectuee"/> <label for="vidange_coolanol_effectuee">EFFECTUEE</label> <br/>
<input type="radio" name="vidange_coolanol" value="non_effectuee" id="vidange_coolanol_non_effectuee"/> <label for="vidange_coolanol_non_effectuee">NON EFFECTUEE</label> <br/>
<div class="affichageImage"></div>
</fieldset>
<br/>
</body>
</html> |
Code Js pour l'affichage des schémas :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| function afficherImage(fieldset, id) { // J'ai modifié ça
var divImage = fieldset.querySelector('.affichageImage'); // J'ai modifié ça
if(divImage.hasChildNodes()){
divImage.removeChild(node);
}
var hrefImg = id +".png";
node = document.createElement('img');
node.id = id +"Image";
node.src = hrefImg;
node.alt = id;
divImage.appendChild(node);
} |
Merci :D
