Pb de creation de liens a partir de données d'un formulaire

Jean-Charles Graillot
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je suis débutant sous JS et suis confronté a un blocage sur l'activité 2 du cours "Créer des pages web interactives avec JS" sur le site openclassrooms.
L'exercice consiste (dans sa parie 2) en la création de liens qui s'ajoutent à la page lorsque l'on soumet un formulaire.
A la base, on a un tableau d'objets qui est fourni.
La partie 1 de l'exo a consisté a créer des liens qui s'ajoutent à partir des objets du tableau.
La partie 2, sur laquelle je bloque, consiste à ajouter un formulaire et renvoyer les données saisies sous forme de lien au dessus de ceux déjà existant.
Le code html ne contient qu'un <h1> et une <div> d'identifiant "contenu". Les éléments de l'exercice doivent tous être créés en JS.

Voici mon code JS actuel:

// 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ée et renvoie un élément DOM affichant les données d'un lien
// Le paramètre lien est un objet JS représentant un lien
function creerElementLien(lien) {
var titreLien = document.createElement("a");
titreLien.href = lien.url;
titreLien.style.color = "#428bca";
titreLien.style.textDecoration = "none";
titreLien.style.marginRight = "5px";
titreLien.appendChild(document.createTextNode(lien.titre));

var urlLien = document.createElement("span");
urlLien.appendChild(document.createTextNode(lien.url));

// Cette ligne contient le titre et l'URL du lien
var ligneTitre = document.createElement("h4");
ligneTitre.style.margin = "0px";
ligneTitre.appendChild(titreLien);
ligneTitre.appendChild(urlLien);

// Cette ligne contient l'auteur
var ligneDetails = document.createElement("span");
ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

var divLien = document.createElement("div");
divLien.classList.add("lien");
divLien.appendChild(ligneTitre);
divLien.appendChild(ligneDetails);

return divLien;

}

var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
var elementLien = creerElementLien(lien);
contenu.appendChild(elementLien);
});

//Creation de la zone avec un bouton qui permet l'accès au formulaire
contenu.insertAdjacentHTML("afterBegin", '<div id = "zcle"></div>');
var zoneCreationLienElt = document.getElementById("zcle");
zoneCreationLienElt.style.marginBottom = "15px";
var boutonAjoutLienElt = document.createElement("button");
boutonAjoutLienElt.textContent = "Ajouter un lien";
boutonAjoutLienElt.id = "bale";
zoneCreationLienElt.appendChild(boutonAjoutLienElt);

//Creation du formulaire
var formulaireElt = document.createElement("form");

var champNom = document.createElement("input");
champNom.type = "text";
champNom.name = "nom";
champNom.id = "nom";
champNom.placeholder = "Entrez votre nom";
champNom.setAttribute("required", "required");
champNom.style.marginRight = "10px";
formulaireElt.appendChild(champNom);

var champTitre = document.createElement("input");
champTitre.type = "text";
champTitre.name = "titre";
champTitre.id = "titre";
champTitre.placeholder = "Entrez le titre du lien";
champTitre.setAttribute("required", "required");
champTitre.style.marginRight = "10px";
formulaireElt.appendChild(champTitre);

var champUrl = document.createElement("input");
champUrl.type = "text";
champUrl.name = "url";
champUrl.id = "url";
champUrl.placeholder = "Entrez l'URL du lien";
champUrl.setAttribute("required", "required");
champUrl.style.marginRight = "10px";
formulaireElt.appendChild(champUrl);

var boutonAjouterElt = document.createElement("input");
boutonAjouterElt.type = "submit";
boutonAjouterElt.value = "Ajouter";
//boutonAjouterElt.textContent = "Ajouter";
boutonAjouterElt.id = "bae";
formulaireElt.appendChild(boutonAjouterElt);

//Lors du clic, apparition du formulaire
boutonAjoutLienElt.addEventListener("click", function () {

zoneCreationLienElt.innerHTML = "";
zoneCreationLienElt.appendChild(formulaireElt);
//Creation du nouveau lien lors de la soumission du formulaire
var form = document.querySelector("form");
form.addEventListener("submit", function (e) {
    listeLiens.push ({
          titre: form.elements.titre.value,
          url: form.elements.url.value,
          auteur: form.elements.nom.value
    });
    console.log(listeLiens);
    var contenu = document.getElementById("contenu");
    // Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
    listeLiens.forEach(function (lien) {
        var elementLien = creerElementLien(lien);
        contenu.appendChild(elementLien);
    });
});

});

Ce que je veux

Je voudrais que les nouveaux liens dont les éléments sont les données saisies s'ajoutent à la page au dessus des autres lors de la soumission du formulaire

Ce que j'obtiens

Lorsque je soumet le formulaire, le lien ne se crée pas.
J'ai pourtant bien avec le console.log l'objet créé avec les données du formulaire qui s'ajoute au tableau.
Merci de m'indiquer ce qui ne vas pas si vous pouvez!

Aucune réponse