Lier un bouton à une action

Version imprimable

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:

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:

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:

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.

23/04/2023, 21h38
CosmoKnacki

Citation:

Pourquoi la balise <p> ne s'active que pour la première question?

La réponse est ta première ligne de code javascript:

Code:

const reponse = document.querySelector ("p");

reponse désigne la première balise p de ton html.
Donc soit tu trouves un moyen d'identifier tes balises p de manière "absolue" avec un classe ou une id (ce qui risque de faire un peu longuet si tu as 40 questions). Soit tu trouves un moyen de désigner la balise p de manière "relative" par rapport au bouton que tu viens de cliquer ou par rapport au div auquel il appartient (pour faire ça utilise les selecteurs css avec querySelector et le paramètre de ta fonction de callback avec addEventListener).

Citation:

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

Moi aussi. Mais commence par faire quelque chose de fonctionnel, puis ensuite essaye de le factoriser. Ne met pas la charrue avant les bœufs.

Citation:

Code:

reponse.style.visibility = ("visible");

Les parenthèses sont inutiles.

Citation:

Code:

<button class=btnVille1> Berne </button>

La valeur d'un attribut html se place entre double-quotes: <button class="btnVille1"> Berne </button> (ou simple quotes mais je trouve ça moins pratique).

Salut TORIX84,

Pour faire un peu plus court.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <h1>Bienvenue sur le Quizz !</h1>
    <div id="divquestions"></div>
    <script src="js/script.js"></script>
</body>
</html>

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
30
31
32
33
34
body{
    background-color: #52524d;
  }
  h1{
    background-color: rgb(11, 161, 234);
    text-align: center;
    color: rgb(248, 252, 29);
  }
  h4{
    width: 100%;
    color:white;
  }
 #divquestions {
    text-align: center;
    margin-top: 50px;
} 
 .bouton {
    display: inline-block;
    margin-left: 20px;
    font-size: 1.2em;
    width: 150px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid rgb(0, 0, 0);
    height: 35px;
}
#divquestions div {
    position: relative;
    border: 2px solid white;
    width: 25%;
    padding-bottom: 20px;
    margin: 20px auto;
    border-radius: 60px;
}

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
const divquestionnaire = document.getElementById("divquestions");
const questions = [{ "question": "Quelle est la capital de la Suisse", "reponse": "A", "A": "Berne", "B": "Genève" }, { "question": "Quelle animal est indépendant", "reponse": "A", "A": "Chat", "B": "Chien" }, { "question": "Comment dire ROUGE en anglais", "reponse": "B", "A": "Blue", "B": "Red" }]
const boutons = document.getElementsByClassName('bouton')
 
AfficheLesQuestions();
 
function AfficheLesQuestions() {
    let questionnaire = ''
    for (const question of questions) {
        questionnaire += `<div data-reponse="${question[question["reponse"]]}">`
        questionnaire += `<h4>${question["question"]}</h4>`
        questionnaire += `<button class="bouton">${question["A"]}</button>`
        questionnaire += `<button class="bouton">${question["B"]}</button></div>`
    }
    divquestionnaire.innerHTML = questionnaire
}
 
for (const boutonselect of boutons) {
    boutonselect.addEventListener("click", () => {
        let parent = boutonselect.parentElement
        if (boutonselect.textContent == parent.dataset.reponse) {
            boutonselect.style.cssText = `background-color: greenyellow; pointer-events: none;`
            parent.style.cssText = `border: 2px solid greenyellow; ; pointer-events: none;`
        } else {
            boutonselect.style.cssText = `background-color: red;  pointer-events: none;`
            parent.style.cssText = `border: 2px solid red; pointer-events: none;`
        }
    })
}