[Résolu] Problème activité 1 javascript - Cours : Créez des pages web interactives avec JavaScript par Clément_ - page 1

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/liensweb.css">
    <title>Activité 1</title>
</head>

<body>
    <h1>Activité 1</h1>

    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>

    <script src="../js/liensweb.js"></script>
</body>

</html>

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eee;
    margin-left: 30px;
    margin-right: 30px;
}

span {
    font-weight: normal;
    font-size: 80%;
}

.lien {
    background: white;
    padding: 10px;
    margin-bottom: 10px;
}

/* 
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"
    }
];

//Création de tout les éléments nécessaire
var divElt = document.createElement("div");
var aElt = document.createElement("a");
var spanUnElt = document.createElement("span");
var spanDeuxElt = document.createElement("span");
var pElt = document.createElement("p");

listeLiens.forEach(function (lien) {

	//Définition des informations des éléments
	divElt.setAttribute("class", "lien");

	aElt.href = lien.url;
	aElt.textContent = lien.titre;
	aElt.style.color = "#428bca";
	aElt.style.textDecoration = "none";
	aElt.style.fontWeight = "bold";

	spanUnElt.textContent = " " + lien.url;

	pElt.classList.add("paragraphe");
	pElt.style = "margin: 0px";

	spanDeuxElt.textContent = "Ajouté par " + lien.auteur;

	//Insertion des éléments
	document.getElementById("contenu").appendChild(divElt);
	divElt.appendChild(aElt);
	divElt.appendChild(spanUnElt);
	divElt.appendChild(pElt);
	pElt.appendChild(spanDeuxElt);

})

Bonjour,

Après avoir dernièrement commencé le cours "Créez des pages web interactives avec JavaScript", me voilà arrivé à la première activité, à savoir Créer un site de partage de liens, activité à laquelle je suis bloqué.

Voici mon problème : le programme que je suis censé faire devrait faire apparaître 3 div au total sur la page sauf qu'il n'en fait apparaitre qu'une seule. Après l'avoir débogué avec Firefox je me suis rendu compte générait une seule div qui était modifiée au fur et à mesure que la boucle avançait plutot que de générer mes 3 div.

Je ne sais pas si je me suis bien fait comprendre, n'hésitez pas à me demander si vous ne comprenez pas.

Voici le résultat que je suis censé obtenir :

Voici ce que j'obtiens :

Comme vous pouvez le remarquer le résultat qui est affiché devrait être la dernière div, c'est ce que j'expliquai à l'instant, mon prgramme modifie simplement la div et ne créer pas les 3 divs souhaités.

Merci d'avance

Clément_