Discussion :

[TheNoob12]

Bonjour à toutes et tous,

Je me permets de poster un topic car je m'arrache depuis plusieurs jours le peu de cheveux que j'ai sur la tête sur une re-factorisation de code pour une petite app.

Voici l'idée: il s'agit d'une simple page web type "arbre de décision". J'ai deux sections qui resteront visibles, les réponses sont dans des sections masquées en display: none;, en fonction du choix de réponse de l'utilisateur elles s'afficheront avec une petite animation CSS issue d'une librairie tierce.

J'ai donc créer mon squelette HTML comme suit:

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
<header>
      <h1>
        Mon super titre de la mort qui tue
      </h1>
    </header>
    <main>
      <section id="init"><!-- Cette section restera toujours visible -->
        <p>
          <i>Icône Font Awesome pour faire joli</i>
          Ma thématique
        </p>
      </section>
      <section id="question_1" class="is_active"><!-- Cette section restera aussi toujours visible -->
        <p>
          <i>Oui ç fait joli </i>
          Ma première question
        </p>
        <a class="btn btn-outline-success" id="step_1" href="#next_1">Oui</a><!-- Lien avec une classe Bootstrap pour styliser en bouton -->
        <a class="btn btn-outline-danger" id="no_1" href="#next_no_1">Non</a>
      </section>
 
<section id="next_1" class="animate__animated"><!-- Classe pour la librairie animate.css afin donner un effet -->
        <p>
          <i>Encore une icône</i>
          Ma deuxième question
        </p>
        <a id="step_2" href="#next_2" class="btn btn-outline-success">Oui</a>
        <a id="no_2" href="#next_no_2" class="btn btn-outline-danger">Non</a>
      </section>

Les sections de mon arbre se succèdent toutes avec le même format d'id et classe CSS, mais à part les deux sections commentées qui restent visibles, les autres sont masquées et apparaissent en fonction du choix de l'utilisateur, avec le petit effet d'animate.css.

J'ai réussi à le faire fonctionner mais en codant en dur/procédural/pas du tout optimisé mon JS. Je mettait bien l'écouteur sur le parent du lien, et en allant chercher l'id des sections, j'arrivais bien à toggle la classe CSS (je souhaite bien utiliser le toggle), en pensant de cette manière:

Au click du lien
- la section correspondant au href cliqué toggle la classe CSS
- j'ajoute ma classe CSS de la librairie animate (qui est "animate__bounceInDown", je ne peux pas la mettre dans le HTML lorsque je le fais l'animation ne fonctionne pas)
- j'enlève la classe CSS "is_active" de la section cloquée
- j'ajoute la classe CSS "is_active" à la section qui apparait


Je sollicite votre aide car j'ai réussi à coder et avoir le résultat souhaité en répétant mon code encore et encore pour chaque choix possible. Depuis plusieurs jours, je cherche à faire une boucle qui serait beaucoup plus propre et maintenable. Je pense qu'a force d'être dessus mon esprit s'embrouille, je vois pas sur quoi je dois boucler et ça m'énerve voilà pourquoi je me permets de poster ce sujet.

Je suis ouvert à toutes propositions, y compris ne pas mettre de JS et utiliser du CSS, tant que le résultat est le même.

Par avance un immense merci aux personnes qui prendront le temps de m'aider.

Bonne fin de semaine, ou week-end

[jreaux62]

Bonjour,

Commence par montrer ton code JS.

Normalement, tu devrais pouvoir y déceler les redondances.

[TheNoob12]

Salut,

Merci pour ta réponse.

Voici le code JS que j'utilise et duplique pour chaque lien:

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
 
 
// je mets tout dans des variables
 
const stepOne = document.getElementById("step_1");
const stepOneSection = document.getElementById("next_1");
const mainSection = document.getElementById("question_1");
 
// ecouteur d'evenement
 
stepOne.addEventListener("click", (e) => {
  e.preventDefault();
  stepOneSection.classList.toggle("is_hidden");
  stepOneSection.classList.add("animate__bounceInDown");
  mainSection.classList.remove("is_active");
  stepOneSection.classList.add("is_active");
});

Je duplique ces lignes en changeant les ID des variables, et les noms aussi. Ca fonctionne mais le code se répète pour chaque possibilité.

Est-ce que tu vois où se situe le souci?

Par avance merci pour ton temps.

[jreaux62]

On voit déjà une incohérence dans le code HTML :

Code html :

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

1
2
3
4
	<section id="next_1" class="...">
        <p>
          <i>...</i>
          Ma deuxième question

1- LOGIQUEMENT, ça devrait être :

Code html :

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

	<section id="question_2"...

2- Ensuite, si on a des traitement équivalents à faire sur plusieurs éléments, on leur ajoute une classe :

Code html :

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

1
2
3
4
5
6
7
	<section id="question_1" class="question ...">
...
	</section>
	<section id="question_2" class="question ...">
...
	</section>
...

on peut alors TOUS les cibler en JS avec document.querySelectorAll :

Code js :

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

const questions = document.querySelectorAll( '.question' ); // à noter : le . de la classe

On peut ensuite les parcourir avec .forEach() :

Code js :

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

1
2
3
questions.forEach(function( question ) {
   ......
});

Voilà pour le début.

[TheNoob12]

Super merci pour ta rapidité de réponse!

J'essaye ça cette après-midi, et je reviens t'indiquer si tout st OK ou non.

Merci encore!

Bon appétit.

[TheNoob12]

Salut,

Je n'ai pas pu poster ma réponse avant, mes excuses.

Alors j'ai renommé toutes mes sections avec la classe indiquée, et essayé ta boucle, en console.log chaque "question" j'ai bien toute la section.

Ca fait un bail que j'ai pas codé en Js du coup je galère un peu... maintenant je n'arrive plus à faire afficher la bonne section au click...

Je vais persévérer, mais si tu as une piste je suis preneur

Merci en tout cas pour ton aide, je reviendrais dans la semaine vous dire si je suis toujours bloqué ou non.

Bonne fin de journée.