je suis en train de suivre le cours "Créer des pages web interactives avec Javascript" et je voudrais faire l'exercice du quiz interactif, le but est d'afficher des questions suivies d'un bouton, bouton qui fait afficher les réponses lors du clic.
J'aimerais que ma fonction afficher, appelée via un EventListener, puisse recevoir un argument autre que celui envoyé par l'EvenListener.
J'ai tenté quelque chose du style :
buttonElt.addEventListener("click", afficher(i));
En soit, je voudrais envoyer à ma fonction l'id du bouton, afin d'afficher la réponse correspondante.
Voici mon code :
function afficher (id) {
parentElt = document.getElementById(id);
var reponse = questions[id][reponse];
var reponseElt = document.createElement("p");
reponseElt.textContent = reponse;
parentElt.replaceChild(reponseElt, getElementById[id]);
//Affichage de la réponse
}
var questions = [
{
enonce: "Combien font 2+2 ?",
reponse: "2+2 = 4"
},
{
enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
reponse: "1492"
},
{
enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
reponse: "La lettre N"
}
];
divElt = document.getElementsByTagName("div")[0];
for (var i = 0; i < questions.length; i++) {
var question = questions[i];
var enonce = question["enonce"];
var enonceElt = document.createElement("p");
enonceElt.textContent = enonce;
divElt.appendChild(enonceElt);
//affichage de l'énoncé
buttonElt = document.createElement("button");
buttonElt.textContent = "Afficher la réponse";
buttonElt.setAttribute("id", i)
enonceElt.appendChild(buttonElt);
//affichage du bouton
buttonElt.addEventListener("click", afficher(i));
}
Le résultat : seule la première question est affichée, et la console m'envoie :
Uncaught ReferenceError: getElementById is not defined
Parce que parentElt est le bouton, et que l'on remplace son enfant... Qui est le même bouton !
Oui, j'ai mis tout ce temps à le remarquer
J'ai cru comprendre qu'il était impossible d'envoyer directement des paramètres dans une fonction appelée via EventListener, donc j'ai essayé de faire une fonction qui retourne celle voulue, avec le bon paramètre, du style :
function fonctionFinale (param) {
console.log(param);
}
function returnFonction (param) {
return fonctionFinale(param);
}
test = returnFonction("ceci est un test");
Afin de pouvoir insérer test dans l'EventListener.
Bien entendu, ç'aurait été trop beau, donc ça ne marche pas. fonctionFinale est appelée ligne 7. Domi65 ou n'importe qui aurait une solution ? Siouplé ?
j'ai essayé d'expérimenter, et je voulais en fait que la variable test soit la fonction fonctionFinale, passée avec le l'argument "ceci est un test", afin de pouvoir passer test dans l'EventListener.
J'ai regardé ton lien, mais le problème avec cette méthode c'est qu'il faut faire une fonction pour chaque élément.
Je ne l'ai pas dit, mais c'est pour cette raison que j'ai demandé si je pouvais envoyer un paramètre via un EventListener, pour ne pas avoir besoin de rajouter une fonction à chaque fois que je rajouterai une question.
Oh, les différentes fonctions représentent les différents moyens de faire, c'est ça ?
La fonction initQuestion créé un EventListener pour chaque bouton, et affiche l'enonce.
Si le paramètre est mainC, alors tu crées un EventListener au clic, qui appelle la fonction afficherC, avec comme paramètre l'index de la réponse et le bouton a remplacer. (et le paramètre oEvent qui est envoyé automatiquement par l'EventListener)
Tu crées l'élément reponseElt à partir de la réponse du tableau, correspondant à l'index passé en paramètre de la fonction, et tu remplaces le bouton (this) par reponseElt.
J'ai tout bon ?
Je vais utiliser la méthode C, mais vu que j'aime pas utiliser des fonctions juste parce que ça marche, je voudrais savoir comment marche la fonction bind(), si ça te dérange pas.
(Par contre on sort du sujet, peut-être continuer par messagerie privée ?)
En tout cas, merci beaucoup pour votre aide (et surtout de votre patience).
Pas de problème, encore merci à vous tous, je marque le sujet comme résolu.
Paramètre sur fonction appelée via EventListener
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.