ça marche nickel ainsi ! Merci C'est frustrant de savoir qu'on est pas loin... Plus on avance et plus les exercices me semblent vraiment compliqués pour des débutants... Je suis obligée de retourner voir les exemples de cours pour réussir à avancer.

n1col4s a écrit:

if ((posY + 110 > cadreWidth))
{        
     deplace = -10;    
}

if(posY == 0)
{
     deplace = 10;
}

Quand le ballon est sur le bord gauche, la propriété left est égal à 0, donc j'ai juste rajouté une condition là dessus.

J'ai augmenté un peu la vitesse pour tester parce que le ballon se déplaçait comme une tortue, c'était un peu long pour faire des essais

-
Edité par n1col4s il y a environ 17 heures

Rolan65 a écrit:

n1col4s a écrit:

Rolan65 a écrit:

Par contre je suis un peu perplexe quant aux raisons de ces problèmes, et pour être tout à fait honnête préférant largement utiliser Mozilla Firefox pour tout un tas de raisons, j'aimerai bien savoir s'il existe un moyen de pallier à ce problème dans Firefox? (je pense que ce ne serait pas non plus du luxe de l'indiquer dans les cours, ça peut éviter à des étudiants de perdre des heures à chercher pourquoi rien ne fonctionne... )

Voilà en espérant que ça puisse servir à d'autres, et pourquoi pas avoir une solution définitive...

Bonne journée!

Roland

C'est normal que les messages d'erreur ne s'affichent pas, il te suffit juste de cliquer sur la case JS, celle avec un rond orange.

En fait ça ne marche pas non plus en sélectionnant le bouton JS, je l'avais tenté aussi mais ne l'avais pas précisé dans mon message, autant pour moi.

J'ai eu un souci similaire. As tu essayé en sélectionnant également 'journal' dans ta console, puis 'logs' et 'erreurs ' ?

-
Edité par CelineChapalain 10 février 2017 à 15:56:42

Bonjour à tous 

Dans l'activité 3 malgré de nombreuses tentatives sur l'api (en POST) : 

https://oc-jswebsrv.herokuapp.com/api/lien

Je n'ai que des erreurs (400 (Bad Request) ), et quand je vais dans postman afin d'encoder l'exemple de l'exercice 3: 

{

  “titre”: “titre du lien”,

  “url”: “URL du lien”,

  “auteur”: “auteur du lien”

}

J'ai ceci en réponse....  "Missing required parameter: titre"

Je trouve cela très étrange et je vois pourtant que d'autres personnes rajoutent des liens lors de mes différentes tentatives... 

Je me demande simplement si après de trop nombreuses tentatives le serveur ne m'aurait-il pas banni ? 

Je ne me demande pas la solution au niveau "source code" mais un éventuel éclaircissement sur cette situation serait vraiment le bienvenu, afin d'identifier la source réelle du problème. 

Merci d'avance et déjà un excellent week-end à tous. 

-
Edité par MathieuVanbellinghen 10 février 2017 à 16:16:37

MathieuVanbellinghen a écrit:

Bonjour à tous 

Dans l'activité 3 malgré de nombreuses tentatives sur l'api (en POST) : 

https://oc-jswebsrv.herokuapp.com/api/lien

Je n'ai que des erreurs (400 (Bad Request) ), et quand je vais dans postman afin d'encoder l'exemple de l'exercice 3: 

{

  “titre”: “titre du lien”,

  “url”: “URL du lien”,

  “auteur”: “auteur du lien”

}

J'ai ceci en réponse....  "Missing required parameter: titre"

Je trouve cela très étrange et je vois pourtant que d'autres personnes rajoutent des liens lors de mes différentes tentatives... 

Je me demande simplement si après de trop nombreuses tentatives le serveur ne m'aurait-il pas banni ? 

Je ne me demande pas la solution au niveau "source code" mais un éventuel éclaircissement sur cette situation serait vraiment le bienvenu, afin d'identifier la source réelle du problème. 

Merci d'avance et déjà un excellent week-end à tous. 

-
Edité par MathieuVanbellinghen il y a moins de 30s

Bonjour, vous avez essayé en enlevant les " " sur titre, url et auteur ?

CelineChapalain a écrit:

MathieuVanbellinghen a écrit:

Bonjour à tous 

Dans l'activité 3 malgré de nombreuses tentatives sur l'api (en POST) : 

https://oc-jswebsrv.herokuapp.com/api/lien

Je n'ai que des erreurs (400 (Bad Request) ), et quand je vais dans postman afin d'encoder l'exemple de l'exercice 3: 

{

  “titre”: “titre du lien”,

  “url”: “URL du lien”,

  “auteur”: “auteur du lien”

}

J'ai ceci en réponse....  "Missing required parameter: titre"

Je trouve cela très étrange et je vois pourtant que d'autres personnes rajoutent des liens lors de mes différentes tentatives... 

Je me demande simplement si après de trop nombreuses tentatives le serveur ne m'aurait-il pas banni ? 

Je ne me demande pas la solution au niveau "source code" mais un éventuel éclaircissement sur cette situation serait vraiment le bienvenu, afin d'identifier la source réelle du problème. 

Merci d'avance et déjà un excellent week-end à tous. 

-
Edité par MathieuVanbellinghen il y a moins de 30s

Bonjour, vous avez essayé en enlevant les " " sur titre, url et auteur ?

Oui bien entendu, dans postman et dans mon code je procède comme ceci 

        monTitre = "GoogleE";
        monUrl = "www.google.com";
        monAuteur = "Bernard";
        var nouveauLien = {
            titre: monTitre,
            url: monUrl,
            auteur: monAuteur 
        };

// JE Passe le code inutile au problème actuel 

 ajaxPost(urlApiPost,nouveauLien,function(reponse){
            reponse = reponse;
        });

// la fonction ajax post du cours qui me semble très correcte

function ajaxPost(url, data, callback, isJson) {
    var req = new XMLHttpRequest();
    req.open("POST", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    if (isJson) {
        // Définit le contenu de la requête comme étant du JSON
        req.setRequestHeader("Content-Type", "application/json");
        // Transforme la donnée du format JSON vers le format texte avant l'envoi
        data = JSON.stringify(data);
    }
    req.send(data);
}

req ouvre la connection mais elle échoue à chaque fois malgré le data formaté correctement et l'url qui est celle donnée dans l'exercice 

LAST UPDATE

Trouvé 2 heures et demi, pour le paramètre "boolean" non déclaré correctement dans la fonction ajaxPost

Je crois qu'il est temps que j'aille me coucher ----___-----

-
Edité par MathieuVanbellinghen 10 février 2017 à 16:59:21

Bonjour,

Je ne comprends pas bien pourquoi ce code fonctionne avec " &&" et pas avec " || ". Je pense que je n'ai pas bien compris les subtilités de ces opérateurs...Si qqn à quelques minutes pour m'expliquer...Car pour moi cela devrait également fonctionner avec ||...

merci d'avance

 

-
Edité par Greg971 10 février 2017 à 20:02:01

@Greg971

On cherche a arrêter la boucle, c.a.d. que la condition dans `while` soit fausse :

Or  on vérifie 2 conditions. Pour que le résultats des 2 conditions soit faux, 

- il faut et il suffit que l'une des 2 soit fausse dans le cas `&&` (seul vrai && vrai est vrai, tout le reste est faux)

- il faut que les 2 soient fausses dans le cas `||` (seul faux || faux est faux, tout le reste est vrai) Hors il est impossible dans le code que texte soit à la fois "oui" et "non". Une des 2 conditions est toujours vraie (texte est différent de "oui" ou texte est différent de "non")

-
Edité par 220A37 10 février 2017 à 22:21:10

ça fonctionne aussi avec un ||, mais bien évidemment il ne suffit pas de remplacer le && par ||. Si ça fonctionnait ça voudrait dire que les deux opérateurs sont identiques. Quand tu veux remplacer un OU || par un ET &&, il faut inverser les conditions : 

while ( !((texte == "oui") || (texte == "non")) ) {
    texte = prompt("voulez-vous jouer à ni oui ni non ?");
}

Je pense que c'est le vocabulaire avec oui et non qui t'embrouille, essaie de faire des exercices avec des variables qui ne prennent pas oui et non comme valeur, peut être que tu comprendras mieux.

Merci pour vos réponses, c'est maintenant bien plus clair.

Bonjour!

Dans le cours https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/interrogez-un-serveur-web

il est dit de chercher le fichier httpd.conf et de faire quelques modifications dans ce fichier...

Ayant installé récemment LAMP (avec apache2) sous Ubuntu 16.04, je ne trouve pas ce fichier ? 

Je pense qu'il doit s'agir des fichiers 000-default.conf ? mais je ne trouve pas la ligne à trouver dont il est question dans le cours et donc je ne sais pas vraiment où insérer les lignes de codes données dans le cours... et ne donc je ne sais pas vraiment quoi faire à ce stade!

J'ai cependant l'impression que tout fonctionne sans modification du fichier httpd.conf !

Mais il est redemandé un peu plus loin dans le cours de modifier de nouveau le serveur : https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/envoyez-des-donnees-a-un-serveur-web

Avez-vous une idée pour la marche à suivre pour les utilisateurs linux ? Merci ;-)

-
Edité par Cool Shen 12 février 2017 à 22:51:38

Je suis sur Ubuntu 16.04 aussi et le fichier se trouve ici : /opt/lampp/etc/httpd.conf

Après, si ça fonctionne sans faire les modifications, autant ne rien changer.

CelineChapalain a écrit:

J'ai eu un souci similaire. As tu essayé en sélectionnant également 'journal' dans ta console, puis 'logs' et 'erreurs ' ?

-
Edité par CelineChapalain 10 février 2017 à 15:56:42

Oui j'ai tenté avec toutes les cases en fait... La console ne m'affiche jamais rien sous FireFox (et seulement avec certains exercices, d'autres fonctionnent nickel). A n'y rien comprendre....

Rolan65 a écrit:

CelineChapalain a écrit:

J'ai eu un souci similaire. As tu essayé en sélectionnant également 'journal' dans ta console, puis 'logs' et 'erreurs ' ?

-
Edité par CelineChapalain 10 février 2017 à 15:56:42

Oui j'ai tenté avec toutes les cases en fait... La console ne m'affiche jamais rien sous FireFox (et seulement avec certains exercices, d'autres fonctionnent nickel). A n'y rien comprendre....

Et avec un console.log("J'aime Firefox") dans une ardoise javascript, tu as essayé juste pour voir si ça s'affiche?

n1col4s a écrit:

Je suis sur Ubuntu 16.04 aussi et le fichier se trouve ici : /opt/lampp/etc/httpd.conf

Après, si ça fonctionne sans faire les modifications, autant ne rien changer.

Je n'ai rien de tout ça dans le dossier opt !
Merci en tout cas

Voila ce que dit la doc Ubuntu : https://doc.ubuntu-fr.org/apache2

httpd.conf est le fichier utilisé par apache1, il est conservé vide dans Apache2 pour assurer la rétrocompatibilité. Il ne nous servira pas ;

Ah oui effectivement j'ai aussi un httpd.conf dans /opt/lampp/apache2 mais il n'est pas complètement vide. Fait une recherche pour trouver le dossier lampp !

Salut,

Un court message pour exposer mon problème. Dans le cours "Utilisez des API web", voilà la capture écran de ce que me renvoie l'URL https://oc-jswebsrv.herokuapp.com/api/articles. Pas du tout ce qui est censé être renvoyé, donc... Une idée ? Merci d'avance !

-
Edité par Paillenapple 15 février 2017 à 5:29:38

Paillenapple a écrit:

Salut,

Un court message pour exposer mon problème. Dans le cours "Utilisez des API web", voilà la capture écran de ce que me renvoie l'URL https://oc-jswebsrv.herokuapp.com/api/articles. Pas du tout ce qui est censé être renvoyé, donc... Une idée ? Merci d'avance !

L'essentiel c'est que l'api retourne un tableau en format json, dont chaque élément possède trois propriétés. Le contenu n'est pas pile-poil la capture montrée dans le cours et ce n'est pas bien grave ! Je vois que t'utilises RESTClient, lorsqu'il t'affiche le resultat choisi le menu Response Body (Highlight) pour observer le tableau json mieux structuré.

-
Edité par pCly 15 février 2017 à 9:44:17

Merci de ta réponse. Pas de problème, j'ai pu avancer malgré ça, mais le contenu des articles, mais le contenu des "articles" est plutôt surprenant... Je signalais, au cas où ce n'était pas volontaire.

Bonjour, je suis à la partie 3 du cours, 'Interrogez un serveur web'. J'ai bien modifié le fichier de conf Apache, ainsi que le fichier JS, et dans la console, j'obtiens bien le message d'avertissement sur XHTTPRequest. Par contre, le contenu qui suit n'est pas du tout le même que dans le tuto. Au lieu de la liste de langages, j'obtiens un résultat html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">



  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-d311c4a37b4a480a760dda55c72eb656b70f39154f15e1b7a7f6506e143d7ec0.css" integrity="sha256-0xHEo3tKSAp2DdpVxy62VrcPORVPFeG3p/ZQbhQ9fsA=" media="all" rel="stylesheet" />
  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github-1553403a85c0174ba800d36d4701990317fd2242f931d53dc3ec5a4d034df94d.css" integrity="sha256-FVNAOoXAF0uoANNtRwGZAxf9IkL5MdU9w+xaTQNN+U0=" media="all" rel="stylesheet" />
  
  
  <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/site-5c15449aded674bc63263aa00d7f72ce39b917055106cf6ef818358d1aafed90.css" integrity="sha256-XBVEmt7WdLxjJjqgDX9yzjm5FwVRBs9u+Bg1jRqv7ZA=" media="all" rel="stylesheet" />
  

  <meta name="viewport" content="width=device-width">
  
  <title>javascript-web-srv/langages.txt at master · oc-courses/javascript-web-srv · GitHub</title>
  <link r[…]

Suis je la seule à avoir ce résultat ? Après vérification, le fichier contient bien du HTML (mais beaucoup plus que ça..). Je ne comprends pas d'où  peut venir l'erreur chez moi :/

A noter que dans le navigateur, j'ai le titre de la page qui s'affiche.

Merci d'avance pour votre aide.

EDIT : Mauvais copier/coller apparemment. Je comprends mieux pourquoi les données étaient si étranges !

-
Edité par CelineChapalain 16 février 2017 à 15:16:45

Bonjour

Je suis au chapitre 2 partie 1 sur le parcours du DOM et j'ai besoin de vos lumières concernant cette ligne:

console.log(document.querySelectorAll("#antiques > .existe").length);

Il s'agit du signe ">" au sélecteur CSS, bien que je pense comprendre cette ligne, je ne vois pas la différence si je l'écris de cette façon:

console.log(document.querySelectorAll("#antiques .existe").length);

Cordialement

Florent

FlorentTHOMAS a écrit:

Bonjour

Je suis au chapitre 2 partie 1 sur le parcours du DOM et j'ai besoin de vos lumières concernant cette ligne:

console.log(document.querySelectorAll("#antiques > .existe").length);

Il s'agit du signe ">" au sélecteur CSS, bien que je pense comprendre cette ligne, je ne vois pas la différence si je l'écris de cette façon:

console.log(document.querySelectorAll("#antiques .existe").length);

Cordialement

Florent

Bonjour,

Le sélecteur > permet de sélectionner les enfants directs. Dans ce cas précis, il ne sélectionnera que les premiers enfants directs ayant la classe 'existe". Si le li avec cette classe avait lui aussi un enfant possédant la classe "existe" (par ex, un <a>), il ne serait pas pris en compte, car il n'est pas un enfant direct.

J'espère que c'est clair, n'hésites pas a me le dire dans le cas contraire

Céline

CelineChapalain a écrit:

FlorentTHOMAS a écrit:

Bonjour

Je suis au chapitre 2 partie 1 sur le parcours du DOM et j'ai besoin de vos lumières concernant cette ligne:

console.log(document.querySelectorAll("#antiques > .existe").length);

Il s'agit du signe ">" au sélecteur CSS, bien que je pense comprendre cette ligne, je ne vois pas la différence si je l'écris de cette façon:

console.log(document.querySelectorAll("#antiques .existe").length);

Cordialement

Florent

Bonjour,

Le sélecteur > permet de sélectionner les enfants directs. Dans ce cas précis, il ne sélectionnera que les premiers enfants directs ayant la classe 'existe". Si le li avec cette classe avait lui aussi un enfant possédant la classe "existe" (par ex, un <a>), il ne serait pas pris en compte, car il n'est pas un enfant direct.

J'espère que c'est clair, n'hésites pas a me le dire dans le cas contraire

Céline

Parfait! j'ai parfaitement compris! Merci de ton aide!

Bonjours à tous.

Je viens de terminer l'exercice "ballon" du chapitre 7. Tout marche nickel mais en comparant avec le corrigé type je me retrouve avec un point qu'il m'est assez difficile d'assimiler concernant l'appel à"RequestAnimationFrame"

Pourquoi faut-il faire l'appel "animationId =requestAnimationFrame(animerBallon);" à l'intérieur de la fonction animerBallon elle même ??

La finalités et le concept m'échappent (je ne suis pas encore rompu aux spécificités de la POO) d'autant que cela fonctionne avec ou sans.

Merci de m'éclairer là dessus.

Bonjour,

Petite info :

Le résultat à obtenir pour l'exercice du chapitre 3 "Utilisez des API web" renvoie une erreur réseau. Par contre, lorsqu'on interroge l'url directement dans le navigateur, on nous renvoie bien un tableau JSON.

L'API fonctionne donc, contrairement à ce que l'on pourrait croire

MatthieuPrieto a écrit:

J'ai même copié/collé la correction du prof pour l'utiliser dans mes fichiers et j'obtiens aussi un message d'erreur 400 ou 505 !

Quelqu'un rencontre t-il le même problème ?

Tu as probablement un problème au niveau de ton fichier ajax.js. Le code 400 indique une erreur au niveau de la syntaxe de la requête et le 505 une version HTTP non supportée par le serveur. Donc je te conseille de tester l'ensemble de la correction (ajax.js et le code qui fait appel à ajaxPost) proposée.

Merci pour ton aide.

Mais ça reste un mystère pour moi, j'utilise aussi pour mon fichier ajax.js le code suivant (la correction) :

J'ai pensé aussi à tester en plaçant en commentaires la fonction ajaxGet, étant donné qu'on appelle ici que la fonction ajaxPost mais j'obtiens toujours cette erreur 400 bad request

Dans le fichier html, la balise script ciblant le fichier ajax.js est bien placée avant celle du fichier article.js, les deux étant juste avant le </body>

Je pense pas que le fait d'être sous mac modifie la donne (ce n'était pas précisé dans ce cours mais pour les exercices vers le serveur local je devais rajouter 8888 après localhost pour que ça fonctionne)

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
function ajaxPost(url, data, callback, isJson) {
    var req = new XMLHttpRequest();
    req.open("POST", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    if (isJson) {
        // Définit le contenu de la requête comme étant du JSON
        req.setRequestHeader("Content-Type", "application/json");
        // Transforme la donnée du format JSON vers le format texte avant l'envoi
        data = JSON.stringify(data);
    }
    req.send(data);
}

Pour info, le code de mon fichier js (celui de la correction) :

var form = document.querySelector("form");
form.addEventListener("submit", function (e) {
    e.preventDefault();
    var article = new FormData(form);
    ajaxPost("http://oc-jswebsrv.herokuapp.com/article", article, function (reponse) {
        var messageElt = document.createElement("p");
        messageElt.textContent = "L'article a bien été ajouté.";
        document.getElementById("resultat").appendChild(messageElt);
    });
});

Quelque chose m'échappe mais je ne sais pas quoi !

-----------------------------------------------------

EDIT :

J'ai réussi à terminer les 2 exercices mais un mystère demeure :

Pour l'exercice 1, j'ai testé l'envoi de l'article sur le serveur local apache configuré au début de ce cours et.. ça marche, les données envoyées apparaissent bien dans le log.

Alors que le même envoi avec l'adresse du serveur openclassroom ne marche pas : bad request.

Les fichiers article.js et ajax.js étant ceux du corrigés, j'ai une dernière fois comparé mon fichier .html avec celui de la correction :

La seule différence  était le nom que j'avais choisi pour le for du label, l'id et le name du champ <textarea> du formulaire : contenus au pluriel

mon ancien code : <label for="contenus">Contenu</label> :
            <br>
            <textarea name="contenus" id="contenus" rows="5"></textarea>

La correction utilisant contenu au singulier :

<label for="contenu">Contenu</label> :
            <br>
            <textarea name="contenu" id="contenu" rows="5"></textarea>

J'ai donc modifié mon fichier html pour adopter la valeur "contenu" et l'envoi de l'article fonctionne, il est publié, je n'ai plus d'erreur 400

Point positif : j'ai trouvé d'où venait le problème.

Point négatif : je n'arrive pas à comprendre le problème en lui-même :

Pourquoi est-ce la valeur du for du label, et de l'id et du name de textarea doit être la même du texte écrit entre les balises label pour que la requête POST fonctionne ?

J'ai fait le test en utilisant d'autres noms pour la valeur, et j'ai l'erreur 400. Ça ne marche qu'avec contenu..

Pour l'exercice 2, j'ai trouvé aussi d'où venait le problème, et je pense le comprendre un peu mieux que celui de l'exercice 1 :

Cette fois au niveau du fichier temoignage.js

Comme je l'avais vu dans des exemples du cours, j'utilisais une variable form pour désigner l'élément form :

mon code :

Code de la correction pour accéder au form et définir l'objet :

Ce 2e code permet d'économiser des lignes de code, et si je comprends bien, le fait de passer l'event au paramètre oblige à définir les propriétés de l'objet temoignage via la syntaxe e.target

-
Edité par MatthieuPrieto 1 mars 2017 à 13:29:52

Bonjour à tous !

J'ai besoin de votre aide pour comprendre la chose suivante.

Dans le dernier exercice de la partie "réagissez à des évènement" (le clic sur le bouton doit remplacer le bouton par l'affichage de la solution), je ne comprends pas pourquoi la version avec "forEach" fonctionne et pas celle avec "for". Je voudrais vraiment comprendre ce qui change et ensuite trouver une rédaction avec 'for" qui marche.

Voici la version qui marche :

// Liste des questions à afficher. Une question est définie par son énoncé et sa 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"
    }
];

var i = 1;
questions.forEach(function(question) {
    var paragrapheElt = document.createElement("p");
    var questionGrasElt = document.createElement("span");
    questionGrasElt.textContent = "Question " + i + " : ";
    questionGrasElt.style.fontWeight = "bold";
    var enonceElt = document.createElement("span");
    enonceElt.textContent = question.enonce;
    var ligne2Elt = document.createElement("div");

    var buttonElt = document.createElement("button");
    buttonElt.textContent = "Afficher la réponse";
    ligne2Elt.appendChild(buttonElt);


    buttonElt.addEventListener("click", function(){
        var reponseElt = document.createElement("span")
        reponseElt.textContent = question.reponse;
        ligne2Elt.innerHTML = "";
        ligne2Elt.appendChild(reponseElt);

    });

    paragrapheElt.appendChild(questionGrasElt);
    paragrapheElt.appendChild(enonceElt);
    paragrapheElt.appendChild(ligne2Elt);

document.getElementById("contenu").appendChild(paragrapheElt);
    i++;
});

et celle qui donne l'erreur " TypeError: questions[i] is undefined " dans la fonction de addEventListener

// Liste des questions à afficher. Une question est définie par son énoncé et sa 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"
    }
];

for (var i = 0; i < questions.length; i++) {

    var paragrapheElt = document.createElement("p");
    var questionGrasElt = document.createElement("span");
    questionGrasElt.textContent = "Question " + (i+1) + " : ";
    questionGrasElt.style.fontWeight = "bold";
    var enonceElt = document.createElement("span");
    enonceElt.textContent = questions[i].enonce;
    var ligne2Elt = document.createElement("div");

    var buttonElt = document.createElement("button");
    buttonElt.textContent = "Afficher la réponse";
    ligne2Elt.appendChild(buttonElt);

    buttonElt.addEventListener("click", function(){
        var reponseElt = document.createElement("span")
        reponseElt.textContent = questions[i].reponse;
        ligne2Elt.innerHTML = "";
        ligne2Elt.appendChild(reponseElt);

    });

    paragrapheElt.appendChild(questionGrasElt);
    paragrapheElt.appendChild(enonceElt);
    paragrapheElt.appendChild(ligne2Elt);

document.getElementById("contenu").appendChild(paragrapheElt);
};

-
Edité par ThomasBertois 8 mars 2017 à 10:36:11

Bonjour Thomas, 

C'est un problème de scope.

A l'intérieur de ta callback, tu enfermes la variable i et non sa valeur.

Au moment de l'exécution de la callback, i est égale à sa dernière valeur, c'est à dire questions.length

Pour régler le soucis, tu dois copier la valeur dans une variable qui se détruira à chaque itération et l'utiliser.

for (var i = 0; i < questions.length; i++) {
    var currentIndex = i;
    var paragrapheElt = document.createElement("p");
    var questionGrasElt = document.createElement("span");
    questionGrasElt.textContent = "Question " + (i+1) + " : ";
    questionGrasElt.style.fontWeight = "bold";
    var enonceElt = document.createElement("span");
    enonceElt.textContent = questions[i].enonce;
    var ligne2Elt = document.createElement("div");
 
    var buttonElt = document.createElement("button");
    buttonElt.textContent = "Afficher la réponse";
    ligne2Elt.appendChild(buttonElt);
 
    buttonElt.addEventListener("click", function(){
        var reponseElt = document.createElement("span")
        reponseElt.textContent = questions[currentIndex ].reponse;
        ligne2Elt.innerHTML = "";
        ligne2Elt.appendChild(reponseElt);
 
    });

-
Edité par Théo Sabattié 8 mars 2017 à 11:28:48

Merci Théo de ta réponse,

je commence à comprendre ce que tu m'expliques. 

Finalement, ce qui reste mystérieux, c'est pourquoi ça marche avec le forEach ? 

Dans les deux cas, à chaque itération de la boucle, on ajoute un gestionnaire d'événement au bouton considéré et on lui associe une fonction déclenchée en cas de clic.

Vu que c'est une fonction anonyme, j'ai du mal à comprendre si ce sont 3 fonctions anonymes différentes qui sont crées ou si c'est la même à qui l'on doit prévoir un paramètre pour savoir sur quel bouton elle devra agir quand elle sera appelée.

Maintenant :

Dans cette version initiale :

    buttonElt.addEventListener("click", function(){
        var reponseElt = document.createElement("span")
        reponseElt.textContent = questions[i].reponse;
        ligne2Elt.innerHTML = "";
        ligne2Elt.appendChild(reponseElt);
    });

au moment où la fonction est appelée elle ne sait pas sur quel index agir

Et dans cette version :

    var currentIndex = i;
    buttonElt.addEventListener("click", function(){
        var reponseElt = document.createElement("span")
        reponseElt.textContent = questions[currentIndex].reponse;
        ligne2Elt.innerHTML = "";
        ligne2Elt.appendChild(reponseElt);
    });

elle agit que sur le 3ème bouton, même si c'est le 1 ou 2 qui sont cliqués 

Finalement, en sortant ma fonction de la boucle for et en mettant des id, cela marche :

function afficheReponse(e) {
    var index = e.target.id;
    var reponseElt = document.createElement("span");
    reponseElt.textContent = questions[index].reponse;
    ligne2Elt = document.getElementById("l"+index);
    ligne2Elt.innerHTML = "";
    ligne2Elt.appendChild(reponseElt);
}

for (var i = 0; i < questions.length; i++) {

    var paragrapheElt = document.createElement("p");
    var questionGrasElt = document.createElement("span");
    questionGrasElt.textContent = "Question " + (i+1) + " : ";
    questionGrasElt.style.fontWeight = "bold";
    var enonceElt = document.createElement("span");
    enonceElt.textContent = questions[i].enonce;
    var ligne2Elt = document.createElement("div");
    ligne2Elt.id = "l"+i;
    var buttonElt = document.createElement("button");
    buttonElt.textContent = "Afficher la réponse";
    buttonElt.id = i;
    ligne2Elt.appendChild(buttonElt);



    buttonElt.addEventListener("click", afficheReponse);


    paragrapheElt.appendChild(questionGrasElt);
    paragrapheElt.appendChild(enonceElt);
    paragrapheElt.appendChild(ligne2Elt);

    document.getElementById("contenu").appendChild(paragrapheElt);
};

Mais pourquoi cela marche aussi simplement avec le forEach ???

-
Edité par ThomasBertois 8 mars 2017 à 13:36:20

Je me suis trompé, 

Plusieurs solutions possibles :

1 / S'arrurer que tout est dans une autre scope sans conflit:

for (var i = 0; i < questions.length; i++) {
    createHtmlQuestion(i+1, questions[i]);
};

function createHtmlQuestion(id, question){
    var paragrapheElt = document.createElement("p");
    var questionGrasElt = document.createElement("span");
    questionGrasElt.textContent = "Question " + id + " : ";
    questionGrasElt.style.fontWeight = "bold";
    var enonceElt = document.createElement("span");
    enonceElt.textContent = question.enonce;
    var ligne2Elt = document.createElement("div");
 
    var buttonElt = document.createElement("button");
    buttonElt.textContent = "Afficher la réponse";
    ligne2Elt.appendChild(buttonElt);
 
    buttonElt.addEventListener("click", function(){
        var reponseElt = document.createElement("span")
        reponseElt.textContent = question.reponse;
        ligne2Elt.innerHTML = "";
        ligne2Elt.appendChild(reponseElt);
    });
 
    paragrapheElt.appendChild(questionGrasElt);
    paragrapheElt.appendChild(enonceElt);
    paragrapheElt.appendChild(ligne2Elt);
 
    document.getElementById("contenu").appendChild(paragrapheElt);
}

2 / Un petit bind pour incruster des valeurs dans la callback sous forme de this

for (var i = 0; i < questions.length; i++) {
    var idQuestion = i+1;
    var question = questions[i];
    var paragrapheElt = document.createElement("p");
    var questionGrasElt = document.createElement("span");
    questionGrasElt.textContent = "Question " + idQuestion + " : ";
    questionGrasElt.style.fontWeight = "bold";
    var enonceElt = document.createElement("span");
    enonceElt.textContent = question.enonce;
    var ligne2Elt = document.createElement("div");
 
    var buttonElt = document.createElement("button");
    buttonElt.textContent = "Afficher la réponse";
    ligne2Elt.appendChild(buttonElt);
 
    buttonElt.addEventListener("click", function(){
        var reponseElt = document.createElement("span")
        reponseElt.textContent = this.question.reponse;
        this.ligne2Elt.innerHTML = "";
        this.ligne2Elt.appendChild(reponseElt);
    }.bind({
        ligne2Elt:ligne2Elt,
        question:question
    }));
 
    paragrapheElt.appendChild(questionGrasElt);
    paragrapheElt.appendChild(enonceElt);
    paragrapheElt.appendChild(ligne2Elt);
 
    document.getElementById("contenu").appendChild(paragrapheElt);
}