Lier un bouton à une action

**TORIX84** · 23/04/2023, 19h56

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.

**CosmoKnacki** · 23/04/2023, 21h38

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 :

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

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).

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.

Code javascript :

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

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

Les parenthèses sont inutiles.

Code html :

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

<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).

**ASCIIDEFOND** · 24/04/2023, 19h19

Salut TORIX84,

Pour faire un peu plus court.

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
<!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 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
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 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
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;`
        }
    })
}

Lier un bouton à une action

JavaScript

Vue hybride

Discussions similaires

Partager

Partager