Questions/réponses, boutons et boucle
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:
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.
