Cacher des images en fonction de l'id sélectionné

**Azuriate** · 28/05/2020, 18h31

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

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

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

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

**NoSmoking** · 28/05/2020, 19h06

Bonjour,
si tu souhaites avoir un élément <div class="affichageImage"> dans chaque <fieldset> dans ce cas il te faut « effacer » tous les éléments <div class="affichageImage"> et « compléter » le bon.

Plusieurs remarques :
• pourquoi la gestion de l'événement sur le <fieldset> ?
• pourquoi ne pas plutôt afficher/masquer directement les images ?
• on verra après les remarques sur le code JavaScript !

**Azuriate** · 28/05/2020, 19h52

Bonjour Nosmoking, merci du retour !

Oui je comprends, faire ça dans une boucle for ?

-Je cible de Fieldset car je veux que le schéma s'affiche dès que la personne arrive sur le Fieldset et pas quand il a déjà sélectionné un radio bouton car sinon ils ne font pas attention au schéma et clique directement sur un bouton.

-Je ne veux pas cacher les images pour éviter de toutes les charger au début, les tablettes et les téléphones sont vraiment nuls ...

**NoSmoking** · 28/05/2020, 21h32

Compris le but, même si l'ergonomie me chagrine un peu mais c'est toi le patron, on en arriverait donc à quelque chose comme :

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
function afficherImage(fieldset, id) {
  // nettoyage globale
  const divImage = document.querySelectorAll('.affichageImage');
  divImage.forEach(function (el) {
    // méthode générique de suppression des enfants
    while (el.firstChild) {
      el.removeChild(el.firstChild);
    }
  })
  // récup. dernier élément du fieldset
  const thisDiv = fieldset.lastElementChild;  /*querySelector('.affichageImage');/**/
  // création de l'image
  const node = document.createElement('img');
  node.src = id + ".png";;
  node.alt = id;
  // ajout de l'image
  thisDiv.appendChild(node);
}

Nota : au passage

Code html :

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

<fieldset onclick="javascript:afficherImage(this, 'img_02')">

peut s'écrire simplement

Code html :

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

<fieldset onclick="afficherImage(this, 'img_02')">

inutile de préciser javascript: l'attribut onclick attendant du ... javascript.

**Azuriate** · 28/05/2020, 22h24

C'est magnifique !!
Merci beaucoup pour ton aide, tes tips et tes commentaires dans le code !

Cacher des images en fonction de l'id sélectionné

JavaScript

Vue hybride

Discussions similaires

Partager

Partager