Questions/réponses, boutons et boucle

**pipiotte** · 18/10/2016, 15h46

Bonjour à tous,

je poste mon premier message sur ce forum après plusieurs jours d'impasse...

Je pense qu'il ne manque pas grand chose, mais je ne trouve pas la solution malgré toutes mes recherches (je suis en train de me former sur javaScript alors...soyez indulgents

)
Voila, j'ai un tableau avec des questions et des réponses.
J'ai créé une boucle pour les afficher, et en cliquant sur le bouton réponse, celui-ci doit laisser place à la réponse écrite.
Or, seul le dernier bouton "réponse" fait ce qu'on lui demande.

J'ai cru comprendre qu'il s'agissait d'un problème de closure, mais je ne comprends pas comment faire...
Merci d'avance pour votre aide !

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
 
for (var i=0; i<questions.length; i++){
 
    //div générale
    var div = document.createElement("div");
	document.getElementById("contenu").appendChild(div);
 
//N° de questions enfants de div generale
	var titresElt = document.createElement("b");
	titresElt.classList.add("titres");
	titresElt.textContent = "Question " + [i+1] + " : ";
	div.appendChild(titresElt); 
 
	//énoncés enfants de div générale
	var enoncesElt = document.createElement("i");
	enoncesElt.textContent = questions[i].enonce; 
	enoncesElt.style.display = "inline";
	div.appendChild(enoncesElt);
 
 
 
 
	//Création du bouton 
		var boutonElt =  document.createElement("button");
    	boutonElt.textContent = "Réponse";
    	boutonElt.style.display="inline";
 
 
    //la réponse 
    	var reponseElt = document.createElement("div");
 
       	reponseElt.textContent = " " +questions[i].reponse;
       	var reponses = reponseElt;
      	reponses.style.display = "none";
 
 
		div.appendChild(reponses);
		div.appendChild(boutonElt);
 
		}
 
function clic (){
		reponses.style.display = "inline";
		boutonElt.style.display="none";
			}
boutonElt.addEventListener("click", clic);

oui c'est mal indenté mais je n'arrête pas de tout bouger pour mes essais, je remettrai tout au propre par la suite.

**Beginner.** · 18/10/2016, 22h02

Salut,

J'ai fait quelques modifications et j'obtiens ça : http://jsbin.com/wejogoxuvo/edit?js,output

- Je pense qu'il fallait entre autres mettre l'instruction boutonElt.addEventListener("click", clic); dans la boucle for...
- J'ai dû faire un tableau de question/réponse pour le test...

- J'ai remplacé ceci : titresElt.textContent = "Question " + [i+1] + " : "; par cela : titresElt.textContent = "Question [" + (i + 1) + "] : ";

**pipiotte** · 19/10/2016, 09h40

Bonjour Beginner,

et merci d'avoir pris le temps de jeter un oeil ! Ton code fonctionne parfaitement !
Après test, c'est le boutonElt.rep = reponseElt et this.rep.style.display qui ont fait que cela fonctionne, et j'aimerais comprendre pourquoi... Pourrais-tu prendre le temps de m'expliquer ? Ce serait vraiment sympa.

Si non, pas de problème je comprends...

Merci encore !

**Beginner.** · 19/10/2016, 15h20

Oui pas de soucis, je vais essayer...

Alors tout comme toi j'ai fait des tests et voyant que cela ne fonctionnait pas j'ai décidé de faire un truc simple :

Tout d'abord comme je disais je pense qu'il fallait entre autres mettre l'instruction boutonElt.addEventListener("click", clic); dans la boucle for... Oui car c'est nécessaire si on veut ajouter un listener à chaque bouton.
Ensuite le problème c'était la fonction clic() :

Code :

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

1
2
3
4
5
6

function clic (){
        reponses.style.display = "inline";
        boutonElt.style.display="none";
            }

Ici le problème c'est à quoi font référence "reponses" et "boutonElt" ? Apparemment toujours au dernier bouton et à la dernière réponse... En fait écrit comme ça, je ne vois pas comment ils pourraient faire référence au bouton sur lequel on clique et c'est pourtant ce que l'on souhaite...

Alors j'ai pensé sauvegarder une référence (afin de pouvoir y accéder par la suite) de chaque élément div contenant la réponse dans le bouton correspondant en écrivant : boutonElt.rep = reponseElt;. Du coup chaque boutonElt a un objet rep auquel on pourra accéder dans la fonction clic()...

Après on modifie la fonction clic() :

Code :

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

1
2
3
4
5
 
function clic(event) {
        this.rep.style.display = "inline";
        this.style.display = "none";
}

Le mot clé "this" fait référence au bouton sur lequel on clique et donc "this.rep" fait référence à la réponse correspondant à ce bouton (si tu préfères c'est une référence à l’élément div contenant la réponse correspondant à ce bouton).

Je ne sais pas si c'est clair mais n'hésite pas à poser tes questions...

**pipiotte** · 19/10/2016, 15h23

D'accord, j'ai compris !

Merci beaucoup beaucoup, vraiment.
Se former seul(e) n'est pas toujours facile...

En tous cas j'ai bien compris tes explications, je cherchais effectivement un moyen de sauvegarder le nom de la variable à chaque itération mais je ne savais pas comment m'y prendre. C'est top !