Bonjour,

Je débute vraiment dans le développement et j'aurais besoin d'un conseil pour mon exercice.


Il s'agit d'un quizz contenant 3 questions dans 3 <div> différentes :


voici le HTML:
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
<body>
 
  <h1>Bienvenue sur le Quizz !</h1>
 
  <div class="box ville"> 
  <h4>Quelle est la capital de la Suisse:</h4>
 
    <button class=btnVille1> Berne </button>
    <button class=btnVille2> Genéve </button>
    <p> La réponse est Berne</p>
</div>
 
 
<div class="box eat">
  <h4>Quelle animal est indépendant:</h4>
  <button class=btnEat1> Chat </button>
    <button class=btnEat2> Chien </button>
  <p> La réponse est chat</p>
</div>
 
 
 
  <div class="box color">
  <h4>Comment dire ROUGE en anglais:</h4>
 
<button class=btnColor1> red </button>
    <button class=btnColor2> Blue </button>
    <p> La réponse est Red</p>
</div>

CSS:
Code css : 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
body{
    background-color: beige;
  }
 
  h1{
    background-color: white;
    text-align:center;
    color: brown
  }
 
  h4{
   padding-top:10px;
    padding-bottom: 10px;
    width: 100%;
    color:white;
  }
 
  .reponse{
  visibility:hidden
  }
  .box{
  text-align:center;
    background-color:black;
  }
  p{
    text-align:center;
    color:white;
    padding-bottom:10px;
    visibility:hidden;
  }

JS:
Code javascript : 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
const reponse = document.querySelector ("p");
const btnVille = document.querySelector (".btnVille1");
const btnVille2 = document.querySelector (".btnVille2");
const btnEat = document.querySelector (".btnEat1");
const btnEat2 = document.querySelector (".btnEat2");
const btnColor = document.querySelector (".btnColor1");
const btnColor2 = document.querySelector (".btnColor2");
 
 
 
btnVille.addEventListener ("click", () => {
 reponse.style.visibility = ("visible");   
 reponse.style.background = ("green");
  });
      btnVille2.addEventListener ("click", () => {
      reponse.style.visibility = ("visible");   
      reponse.style.background = ("red");
       });
 
  btnEat.addEventListener ("click", () => {
 reponse.style.visibility = ("visible");   
 reponse.style.background = ("green");
  });
 
 btnEat2.addEventListener ("click", () => {
      reponse.style.visibility = ("visible");   
      reponse.style.background = ("red");
       });
 
 
  btnColor.addEventListener ("click", () => {
    reponse.style.visibility = ("visible");   
    reponse.style.background = ("green");
     });
       btnColor2.addEventListener ("click", () => {
         reponse.style.visibility = ("visible");   
         reponse.style.background = ("red");
          });

Mon soucie étant que je n'arrive pas à relier les boutons des questions "eat" et "color" à leurs bouton respectif.
Chaque push sur les boutons active la réponse de la première box.

Pourquoi la balise <p> ne s'active que pour la première question?
J'ai essayé d'ajouter la classe de la box à la constante, mais le résultat est le même.

Et je suis certain qu'il y a un autre moyen plus court pour coder ce quizz sans passer par Trente "const" différente.



A votre disposition!
(Mauvais endroit du post désolé )


R.