Erreur avec value

Le problème exposé dans ce sujet a été résolu.

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

Salut, je crois avoir trouvé l’origine de ton problème :p

Dans ta fonction ajouterLien() ligne 118, tu compare et remplace le contenu de la variable urlElt qui est tout simplement un objet HTML Input et non pas la valeur contenue dans la zone de texte qui s’obtient via l’appel de l’attribut value de ton objet HTML Input.

+0 -0

Il n’y a pas qu’a cet endroit ou tu as oublié de rajouté .value. Au début de ta fonction ajouterLien(), tu as un test sur la variable urlElt à la ligne 120 et une affectation ligne 121 :

// Voila le code réparé ;)

function ajouterLien () {
  let regex = /http:/ || /https:/;
    if(regex.test(urlElt.value) === false) {
      urlElt = "http://" + urlElt.value;
    }

  // ... suite de ta fonction
}
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte