Bonjour,

Je suis en train de faire l'activité 1 du cours "Créez des pages web interactives avec JS". Je pense avoir écrit mon code correctement mais il doit y avoir un soucis quelque part car seul un cadre s'affiche mais il est vide.

Voici mon code

/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web

var ulElt = document.createElement("ul"); // Création de la liste

// Création pour chaque lien d'une balise <li> contenant le titre coloré, le lien et l'auteur, le tout dans une boucle forEach

listeLiens.forEach ( function (lien) {
    var liElt = document.createElement("li");
    liElt.style.listStyleType = "none";
    liElt.style.backgroundColor = "white";
    var titreElt = document.createElement("span");
    titreElt.textContent = listeLiens.titre;
    titreElt.style.color = "#428bca";
    var lienElt = document.createElement("a");
    lienElt.textContent = listeLiens.url;
    lienElt.href = listeLiens.url;
    var sautElt = document.createElement("br");
    var auteurElt = document.createElement("span");
    auteurElt.textContent = listeLiens.auteur;
    
    liElt.appendChild(titreElt);
    liElt.appendChild(lienElt);
    liElt.appendChild(sautElt);
    liElt.appendChild(auteurElt);
    ulElt.appendChild(liElt);
});


document.getElementById("contenu").appendChild(ulElt);

Si quelqu'un voit ce qui cloche ... merci d'avance

Bonjour

dans ta boucle forEach il faut que tu utilises la variable lien que tu as déclarée.

titreElt.textContent = lien.titre;

lienElt.textContent = lien.url;

lienElt.href = lien.url;

auteurElt.textContent = lien.auteur;

Xavier

Bonjour,

Merci pour ta réponse mais je ne la comprend pas vraiment... la variable lien est bien utilisée dans mon code je crois ou pas comme il faut?

Justement tu ne n'utilises pas, tu l'as simplement déclaré.

Ton tableau listeLiens possède 3 objets qui tour à tour du forEach sont représentés par ta variable lien. Donc c'est sur celle ci que tu peux récupérer les infos telles que titre url et autheur

Ah oui je comprend mieux je m'étais auto-embrouillé avec mes variables =)

Merci pour vos réponses