Bien le bonjour,
Je suis actuellement entrain de faire l’activité "Gérer l’ajout de nouveaux liens" du cours "creez des pages web interactives avec Javascript" sur OpenClassroom. Tous marche comme je le veux ou presque. En effet lorsque je demande la valeur de ma variable "urlElt" (ligne 125) j’ai [object HTMLInputElement] qui s’affiche au lieu d’avoir la valeur entrer par l’utilisateur.
J’espère que quelqu’un saura me venir en aide.
/*
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é)
let 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"
}
];
// Activité 2
// 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) {
let 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));
let urlLien = document.createElement("span");
urlLien.appendChild(document.createTextNode(lien.url));
// Cette ligne contient le titre et l'URL du lien
let ligneTitre = document.createElement("h4");
ligneTitre.style.margin = "0px";
ligneTitre.appendChild(titreLien);
ligneTitre.appendChild(urlLien);
// Cette ligne contient l'auteur
let ligneDetails = document.createElement("span");
ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));
let divLien = document.createElement("div");
divLien.classList.add("lien");
divLien.appendChild(ligneTitre);
divLien.appendChild(ligneDetails);
return divLien;
}
let 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) {
let elementLien = creerElementLien(lien);
contenu.appendChild(elementLien);
});
//Intégrer à l’application un formulaire permettant d’ajouter un nouveau lien
//en saisissant ses informations (titre, URL et auteur).
//création bouton ajout lien
let boutonElt = document.createElement("button");
boutonElt.textContent = "Ajouter un lien";
boutonElt.style.marginBottom = "20px";
contenu.insertBefore(boutonElt, contenu.firstChild);
//création formulaire et bouton ajouter
let formElt = document.createElement("form");
formElt.id = "form";
let titreElt = document.createElement("input");
titreElt.id = "newTitre";
titreElt.placeholder = "Entrer le titre du lien";
titreElt.setAttribute("required", "required");
titreElt.style.marginRight = "10px";
titreElt.style.width = "300px";
let urlElt = document.createElement("input");
urlElt.id = "newUrl";
urlElt.placeholder = "Entrer l'URL du lien";
urlElt.setAttribute("required", "required");
urlElt.style.marginRight = "10px";
urlElt.style.width = "300px";
let auteurElt = document.createElement("input");
auteurElt.id = "newAuteur";
auteurElt.placeholder = "Entrer votre prénom";
auteurElt.setAttribute("required", "required");
auteurElt.style.marginRight = "10px";
auteurElt.style.marginBottom = "20px";
auteurElt.style.width = "150px";
let boutonAdd = document.createElement("button");
boutonAdd.id = "add";
boutonAdd.textContent = "Ajouter";
formElt.appendChild(auteurElt);
formElt.appendChild(titreElt);
formElt.appendChild(urlElt);
formElt.appendChild(boutonAdd);
//affichage formulaire
boutonElt.addEventListener("click", function() {
contenu.replaceChild(formElt, boutonElt);
});
// fonction ajoutant lien
function ajouterLien () {
let regex = /http:/ || /https:/;
if(regex.test(urlElt) === false) {
urlElt = "http://" + urlElt;
}
let newT = document.createElement("a");
newT.href = urlElt.value;
newT.style.color = "#428bca";
newT.style.textDecoration = "none";
newT.style.marginRight = "5px";
newT.appendChild(document.createTextNode(titreElt.value));
let newU = document.createElement("span");
newU.appendChild(document.createTextNode(urlElt));
let ligne = document.createElement("h4");
ligne.style.margin = "0px";
ligne.appendChild(newT);
ligne.appendChild(newU);
let newA = document.createElement("span");
newA.appendChild(document.createTextNode("Ajouté par " + auteurElt.value));
let newDiv = document.createElement("div");
newDiv.classList.add("lien");
newDiv.appendChild(ligne);
newDiv.appendChild(newA);
contenu.insertBefore(newDiv, contenu.firstChild);
contenu.insertBefore(boutonElt, contenu.firstChild);
let msgConfirm = document.createElement("p");
msgConfirm.textContent = "Le lien " + titreElt.value + " a été ajouté.";
msgConfirm.style.background = "#cce6ff";
msgConfirm.style.color = "#006699";
msgConfirm.style.paddingTop = "30px";
msgConfirm.style.paddingBottom = "30px";
msgConfirm.style.paddingLeft = "15px";
contenu.insertBefore(msgConfirm, contenu.firstChild);
setTimeout(function () {
msgConfirm.style.display = "none";
}, 2000);
}
//ajout lien
formElt.addEventListener("submit", function(e) {
contenu.replaceChild(boutonElt, formElt);
e.preventDefault();
ajouterLien();
});
+0
-0