Conditions if () {} else {} dans une fonction

Version imprimable

25/07/2019, 22h12
KinéticKorok

1 pièce(s) jointe(s)

Conditions if () {} else {} dans une fonction

Bonjour tout le monde !

C'est mon premier poste ici, j'espère que je suis au bon endroit ! :D

Je commence tout juste à apprendre à coder (HTML, JavaScript, CSS) et j'aimerais mettre en application ce que je connais dans le cadre d'un escape game que je ferai faire à des amis. Je compte utiliser mon ordinateur (et le programme que j'aurai construit) pour leur révéler aux fur et à mesure des indices. Le problème, c'est que le Script ne fonctionne pas avec le HTML... Même en faisant très attention à mes lignes de code, impossible de trouver ce qui ne fonctionne pas... :roll:

Le seul soucis éventuel que je vois c'est que j'ai utilisé les conditions if () {} else {} à l'intérieur d'une fonction function() {}. Est-ce vous pensez que c'est la cause du dysfonctionnement ?

Je vous mets une image du HTML et du JavaScript que j'ai écrit pour le moment, au cas où. Je cherche simplement à afficher un message différent en fonction de la réponse qui est donnée dans la boîte de texte pour chaque question que je pose.

Merci d'avance pour vos réponses ! :D

Pièce jointe 493769
25/07/2019, 22h50
ProgElecT

Salut, bienvenue sur DVP

Plutôt que des images du code, préférez faire un copier/coller et mettre chaque codes entre les balises [CODE] ici le code [/CODE], bouton # dans l'éditeur.
Cela permet de faire du copier/coller de notre coté et, cela est beaucoup plus visible que tes captures d'écran.

Merci ! Je ne connaissais cette fonctionnalité ! Voici donc le code :D

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
39
 <p>
<strong>Première question, facile, pour que vous compreniez le principe :
</strong><br>
Quel est mon prénom ?<br>
<input id="inputReponse1" type="text" placeholder="ex. Michel, Antoine, ...">
<button onclick="check1()">Valider</button>
</p>
<p id="solution1"></p>
 
<p>
<strong>Deuxième question à présent, qui va demander un peu plus de réflexion de
   votre part :</strong><br>
Quel est le jeu de société présent dans cette chambre auquel je joue le moins ?
 
<br>
<input id="inputReponse2" type="text" placeholder="ex. Uno, Président, ...">
<button onclick="check2()">Valider</button>
</p>
<p id="solution2"></p>
 
<p>
<strong>Troisième question maintenant :</strong><br>
Quel est mon jeu Mario préféré ?<br>
<input id="inputReponse3" type="text" placeholder="ex. Mario Kart Wii, ...">
<button onclick="check3()">Valider</button>
</p>
<p id="solution3"></p>
 
<p>
<strong>Quatrième question à présent</strong> <i><emp>(il y en a combien comme
 
ça ??)</emp></i><strong> :</strong><br>
Quel est l'animal emblème de mon école de kinésithérapie ?<br>
<input id="inputReponse4" type="text"  placeholder="ex. Lapin, Girafe ...">
<button onclick="check4()">Valider</button>
</p>
<p id="solution4"></p>
 
<script src="script.js"></script>

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 function check1() {
  var reponseDonnee1 = document.getElementById("inputReponse1").value;
  if (reponseDonnee1==="Quentin") {
  document.getElementById("solution1").innerHTML = "Correct ! Voici votre premier
  indice !";
  } else if (reponseDonnee1==="") {
  document.getElementById("solution1").innerHTML = "Comment vous voulez que le
  programme reconnaisse la réponse si vous n'écrivez rien ?";
  } else {
  document.getElementById("solution1").innerHTML = "On se connaît depuis combien
  de temps déjà ? Retente ta chance !"
}
 
function check2() {
  var reponseDonnee2 = document.getElementById("inputReponse2").value;
  if (reponseDonnee2==="Blanc Manger Coco") {
  document.getElementById("solution2").innerHTML = "Correct encore une fois, vous
  avez fait preuve de réflexion on dirait ! Voilà votre indice."
  } else if (reponseDonnee2==="") {
  document.getElementById("solution2").innerHTML = "Comment vous voulez que le
  programme reconnaisse la réponse si vous n'écrivez rien ?"
  } else {
  document.getElementById("solution2").innerHTML = "Raté ! Cherchez l'emplacement
  des jeux de société dans ma chambre et réfléchissez auquel pourrait correspondre
  à ma requête"
}
 
 
function check3() {
  var reponseDonnee3 = document.getElementById("inputReponse3").value;
  if (reponseDonnee3==="Super Mario Odyssey") {
  document.getElementById("solution3").innerHTML = "Oui bien joué! <3<3";
  // AJOUTER LE LIEN VERS LE FICHIER LOCAL + AFFICHAGE DE LA QUESTION SUIVANTE
  } else if (reponseDonnee3==="") {
  document.getElementById("solution3").innerHTML = "Comment vous voulez que le
  programme reconnaisse la réponse si vous n'écrivez rien ?";
  } else {
  document.getElementById("solution3").innerHTML = "Non, dommage ! La réponse se
  trouve pas très loin, dans la chambre, cherchez bien.";
}
 
 
function check4() {
  var reponseDonnee4 = document.getElementById("inputReponse4").value;
  if (reponseDonnee4==="Gorille") {
  document.getElementById("solution3").innerHTML = "Ce que vous êtes forts ! Bonne
  réponse !"
  // AJOUTER LE LIEN VERS LE FICHIER LOCAL + AFFICHAGE DE LA QUESTION SUIVANTE
  } else if (reponseDonnee4==="") {
  document.getElementById("solution4").innerHTML = "Comment vous voulez que le
  programme reconnaisse la réponse si vous n'écrivez rien ?"
  } else if (reponseDonnee4==="Chèvre") {
  document.getElementById("solution4").innerHTML = "Navré de te décevoir Pierre,
  mais ce n'est pas l'emblème de mon école. Pas plus que le T-Rex d'ailleurs..."
  } else { document.getElementById("solution4").innerHTML = "Mauvaise réponse... C'est un
  animal lourd, pourtant je le porte sur moi assez fréquemment."
}

:salut:

Les problèmes étaient dans le script. Oubli de } à la fin des fonctions et mauvaise gestion des textes. Dans les innerHTML, avec ' ' ou " " on ne peut pas aller à la ligne sans conséquence. Il faut utiliser ` ` ce qui s'obtient sur mon clavier par la combinaison de touches ALT GR + £, mais votre clavier n'est probablement pas Belge.

Dans le HTML, il y avait une erreur, un second <strong> avant le </strong>

J'ai remplacé les var par let et les innerHTML par textContent.

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<p>
    <strong>Première question, facile, pour que vous compreniez le principe :</strong><br>
    Quel est mon prénom ?<br>
    <input id="inputReponse1" type="text" placeholder="ex. Michel, Antoine, ...">
    <button onclick="check1()">Valider</button>
</p>
<p id="solution1"></p>
<p>
    <strong>Deuxième question à présent, qui va demander un peu plus de réflexion de
        votre part :</strong><br>
    Quel est le jeu de société présent dans cette chambre auquel je joue le moins ?<br>
    <input id="inputReponse2" type="text" placeholder="ex. Uno, Président, ...">
    <button onclick="check2()">Valider</button>
</p>
<p id="solution2"></p>
<p>
    <strong>Troisième question maintenant :</strong><br>
    Quel est mon jeu Mario préféré ?<br>
    <input id="inputReponse3" type="text" placeholder="ex. Mario Kart Wii, ...">
    <button onclick="check3()">Valider</button>
</p>
<p id="solution3"></p>
<p>
    <strong>Quatrième question à présent</strong>
    <i>
        <emp>(il y en a combien comme ça ??)</emp>
    </i> :</strong><br>
    Quel est l'animal emblème de mon école de kinésithérapie ?<br>
    <input id="inputReponse4" type="text" placeholder="ex. Lapin, Girafe ...">
    <button onclick="check4()">Valider</button>
</p>
<p id="solution4"></p>
<script>
    function check1() {
        let reponseDonnee1 = document.getElementById("inputReponse1").value;
 
        if (reponseDonnee1 === "Quentin") {
            document.getElementById("solution1").textContent = `Correct ! Voici votre premier indice!`;
        } else if (reponseDonnee1 === "") {
            document.getElementById("solution1").textContent = `Comment vous voulez que le programme 
            reconnaisse la réponse si vous n 'écrivez rien ?`;
        } else {
            document.getElementById("solution1").textContent = `On se connaît depuis combien de temps 
            déjà ? Retente ta chance!`;
        }
    }
 
    function check2() {
        let reponseDonnee2 = document.getElementById("inputReponse2").value;
 
        if (reponseDonnee2 === "Blanc Manger Coco") {
            document.getElementById("solution2").textContent = `Correct encore une fois, vous avez 
            fait preuve de réflexion on dirait!Voilà votre indice.`;
        } else if (reponseDonnee2 === "") {
            document.getElementById("solution2").textContent = `Comment vous voulez que le programme 
            reconnaisse la réponse si vous n 'écrivez rien ?`;
        } else {
            document.getElementById("solution2").textContent = `Raté ! Cherchez l'emplacement des jeux 
            de société dans ma chambre et réfléchissez auquel pourrait correspondre à ma requête`;
        }
    }
 
 
    function check3() {
        let reponseDonnee3 = document.getElementById("inputReponse3").value;
 
        if (reponseDonnee3 === "Super Mario Odyssey") {
            document.getElementById("solution3").textContent = `Oui bien joué! <3<3`;
            // AJOUTER LE LIEN VERS LE FICHIER LOCAL + AFFICHAGE DE LA QUESTION SUIVANTE
        } else if (reponseDonnee3 === "") {
            document.getElementById("solution3").textContent = `Comment vous voulez que le
            programme reconnaisse la réponse si vous n 'écrivez rien ?`;
        } else {
            document.getElementById("solution3").textContent = `Non, dommage ! La réponse se
            trouve pas très loin, dans la chambre, cherchez bien.`;
        }
    }
 
 
    function check4() {
        let reponseDonnee4 = document.getElementById("inputReponse4").value;
 
        if (reponseDonnee4 === "Gorille") {
            document.getElementById("solution3").textContent = `Ce que vous êtes forts ! Bonne
            réponse!`;
            // AJOUTER LE LIEN VERS LE FICHIER LOCAL + AFFICHAGE DE LA QUESTION SUIVANTE
        } else if (reponseDonnee4 === "") {
            document.getElementById("solution4").textContent = `Comment vous voulez que le
            programme reconnaisse la réponse si vous n 'écrivez rien ?`;
        } else if (reponseDonnee4 === "Chèvre") {
            document.getElementById("solution4").textContent = `Navré de te décevoir Pierre,
            mais ce n 'est pas l'emblème de mon école.Pas plus que le T - Rex 
            d 'ailleurs...`;
        } else {
            document.getElementById("solution4").textContent = `Mauvaise réponse... C'est un
            animal lourd, pourtant je le porte sur moi assez fréquemment.`;
        }
    }
</script>

26/07/2019, 11h27
KinéticKorok

Waouh, ça fonctionne ! Merci beaucoup pour votre réactivité et votre compétence, votre aide est grandement appréciée ! :D:D

Je vais sans plus attendre me plonger dans votre script pour éviter de faire la même erreur à l'avenir. Encore merci :)

Bonsoir

Si vous souhaitez améliorer votre manière de coder, je vous conseille de regarder les codes suivants.

Fichier 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
<p>
    <strong>Première question, facile, pour que vous compreniez le principe :</strong><br>
    Quel est mon prénom ?<br>
    <input id="inputReponse1" type="text" placeholder="ex. Michel, Antoine, ...">
    <button type="button" id="check1">Valider</button>
</p>
<p id="solution1"></p>
<p>
    <strong>Deuxième question à présent, qui va demander un peu plus de réflexion de
        votre part :</strong><br>
    Quel est le jeu de société présent dans cette chambre auquel je joue le moins ?<br>
    <input id="inputReponse2" type="text" placeholder="ex. Uno, Président, ...">
    <button type="button" id="check2">Valider</button>
</p>
<p id="solution2"></p>
<p>
    <strong>Troisième question maintenant :</strong><br>
    Quel est mon jeu Mario préféré ?<br>
    <input id="inputReponse3" type="text" placeholder="ex. Mario Kart Wii, ...">
    <button type="button" id="check3">Valider</button>
</p>
<p id="solution3"></p>
<p>
    <strong>Quatrième question à présent</strong>
    <i>
        <emp>(il y en a combien comme ça ??)</emp>
    </i> :</strong><br>
    Quel est l'animal emblème de mon école de kinésithérapie ?<br>
    <input id="inputReponse4" type="text" placeholder="ex. Lapin, Girafe ...">
    <button type="button" id="check4">Valider</button>
</p>
<p id="solution4"></p>

Fichier JS séparé :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
window.document.addEventListener('DOMContentLoaded', ev => {
    // le DOM est construit, la page web n'est pas visible
 
    // début code du test
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});
 
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const
        elemSolution1 = document.querySelector("#solution1"),
        elemSolution2 = document.querySelector("#solution2"),
        elemSolution3 = document.querySelector("#solution3"),
        elemSolution4 = document.querySelector("#solution4"),
        elemCheck1 = document.querySelector('#check1'),
        elemCheck2 = document.querySelector('#check2'),
        elemCheck3 = document.querySelector('#check3'),
        elemCheck4 = document.querySelector('#check4'),
        elemReponse1 = document.querySelector("#inputReponse1"),
        elemReponse2 = document.querySelector("#inputReponse2"),
        elemReponse3 = document.querySelector("#inputReponse3"),
        elemReponse4 = document.querySelector("#inputReponse4");
 
    elemCheck1.addEventListener('click', ev => {
        let reponseDonnee1 = elemReponse1.value;
 
        if (reponseDonnee1 === "Quentin") {
            elemSolution1.textContent = `Correct ! Voici votre premier indice!`;
        } else if (reponseDonnee1 === "") {
            elemSolution1.textContent = `Comment vous voulez que le programme 
            reconnaisse la réponse si vous n 'écrivez rien ?`;
        } else {
            elemSolution1.textContent = `On se connaît depuis combien de temps 
            déjà ? Retente ta chance!`;
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    elemCheck2.addEventListener('click', ev => {
        let reponseDonnee2 = elemReponse2.value;
 
        if (reponseDonnee2 === "Blanc Manger Coco") {
            elemSolution2.textContent = `Correct encore une fois, vous avez 
            fait preuve de réflexion on dirait!Voilà votre indice.`;
        } else if (reponseDonnee2 === "") {
            elemSolution2.textContent = `Comment vous voulez que le programme 
            reconnaisse la réponse si vous n 'écrivez rien ?`;
        } else {
            elemSolution2.textContent = `Raté ! Cherchez l'emplacement des jeux 
            de société dans ma chambre et réfléchissez auquel pourrait correspondre à ma requête`;
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    elemCheck3.addEventListener('click', ev => {
        let reponseDonnee3 = elemReponse3.value;
 
        if (reponseDonnee3 === "Super Mario Odyssey") {
            elemSolution3.textContent = `Oui bien joué! <3<3`;
            // AJOUTER LE LIEN VERS LE FICHIER LOCAL + AFFICHAGE DE LA QUESTION SUIVANTE
        } else if (reponseDonnee3 === "") {
            elemSolution3.textContent = `Comment vous voulez que le
            programme reconnaisse la réponse si vous n 'écrivez rien ?`;
        } else {
            elemSolution3.textContent = `Non, dommage ! La réponse se
            trouve pas très loin, dans la chambre, cherchez bien.`;
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    elemCheck4.addEventListener('click', ev => {
        let reponseDonnee4 = elemReponse4.value;
 
        if (reponseDonnee4 === "Gorille") {
            elemSolution4.textContent = `Ce que vous êtes forts ! Bonne
            réponse!`;
            // AJOUTER LE LIEN VERS LE FICHIER LOCAL + AFFICHAGE DE LA QUESTION SUIVANTE
        } else if (reponseDonnee4 === "") {
            elemSolution4.textContent = `Comment vous voulez que le
            programme reconnaisse la réponse si vous n 'écrivez rien ?`;
        } else if (reponseDonnee4 === "Chèvre") {
            elemSolution4.textContent = `Navré de te décevoir Pierre,
            mais ce n 'est pas l'emblème de mon école.Pas plus que le T - Rex 
            d 'ailleurs...`;
        } else {
            elemSolution4.textContent = `Mauvaise réponse... C'est un
            animal lourd, pourtant je le porte sur moi assez fréquemment.`;
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});