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

**Kin�ticKorok** · 25/07/2019, 22h12

Bonjour tout le monde !

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

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

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 !

Nom : Capture.PNG
Affichages : 159
Taille : 205,9 Ko

**ProgElecT** · 25/07/2019, 22h50

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.

**Kin�ticKorok** · 25/07/2019, 23h54

Merci ! Je ne connaissais cette fonctionnalit� ! Voici donc le code

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
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 :

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
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."
}

**danielhagnoul** · 26/07/2019, 10h48

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

**Kin�ticKorok** · 26/07/2019, 11h27

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

Je vais sans plus attendre me plonger dans votre script pour �viter de faire la m�me erreur � l'avenir. Encore merci

**danielhagnoul** · 26/07/2019, 21h55

Bonsoir

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

Fichier 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
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 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
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
});

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

JavaScript

Discussions similaires

Partager

Partager