Activite 2, gerer l'ajout de nouveaux items soucis par LordHawk - page 1

Hello,

J'ai presque finit l'activité 2, pour gérer l'ajout de nouveaux items dans le cours sur le JS pour les pages web... Mais il y a deux trucs que je n'arrive pas à faire, mon code commence à se faire gros, et je crois que je me suis perdu dans tout ça, et que je n'ai pas la bonne méthode pour y arriver.

En gros, tout fonctionne sauf : ajouter http:// devant les liens qui en ont pas (et pourtant, en faisant des tests avec mon regex, ça fonctionne, mais c'est ajouter le http qui pose problème), et, lorsque le bouton valider à été pressé et que le lien s'ajoute, je n'arrive pas à remettre la page html comme elle était avant toutes les modifications JS (avec le bouton "ajouter un lien").

<!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>
    
    <div id="infos">
    </div>
    
    <form id="formulaire"><button id="ajouterBtn">Ajouter un lien</button></form>
    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>

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

</html>

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

function creerLien(lien) {
    var paraElt = document.createElement("p");
    var lienElt = document.createElement("a");
    var lienEltText = document.createTextNode(lien.titre);
    lienElt.setAttribute('href', lien.url);
    lienElt.appendChild(lienEltText);
    paraElt.appendChild(lienElt);

    document.getElementById('contenu').appendChild(paraElt);
    paraElt.innerHTML += '   '+lien.url+'<br>';
    paraElt.innerHTML += 'Ajouté par '+lien.auteur;
    paraElt.classList.add("lien");
    
    paraElt.style.color = "black";
    paraElt.style.backgroundColor = "white";
    paraElt.style.lineHeight = "1.5";
    paraElt.style.padding = "10px";
    
    var aElt = document.querySelectorAll("a");
    for(var i = 0; i < aElt.length; i++) {
        aElt[i].style.color = "#428bca";
        aElt[i].style.textDecoration = "none";
        aElt[i].style.fontWeight = "bold";
        aElt[i].style.fontSize = "25px";
    }
    
    return paraElt;
}

listeLiens.forEach(function (lien) {
    creerLien(lien);
});



var buttonElt = document.getElementById("ajouterBtn");

buttonElt.addEventListener("click", function() {
    
    document.getElementById("formulaire").removeChild(buttonElt);
                                                                            
    var nom = document.createElement("input");
    var titre = document.createElement("input");
    var url = document.createElement("input");
    var boutonValider = document.createElement("button");
    
    nom.setAttribute("type", "text");
    nom.setAttribute("required", "");
    nom.setAttribute("placeholder", "Entrez votre nom");
    nom.className = "boite";
    nom.id = "nom";
    
    titre.setAttribute("type", "text");
    titre.setAttribute("required", "");
    titre.setAttribute("placeholder", "Entrez le titre du lien");
    titre.className = "boite";
    titre.id = "titre";
    
    url.setAttribute("type", "text");
    url.setAttribute("required", "");
    url.setAttribute("placeholder", "Entrez l'URL du lien");
    url.className = "boite";
    url.id = "url";
    
    formElt = document.getElementById("formulaire");
    formElt.appendChild(nom);
    formElt.appendChild(titre);
    formElt.appendChild(url);
    
    var boite = document.getElementsByClassName("boite");
    
    for(var i = 0;i < boite.length;i++) {
        boite[i].style.marginRight = "10px";
    }
    
    boutonValider.id = "validerBtn";
    boutonValider.textContent = "Valider";
    formElt.appendChild(boutonValider);
    
});

var formElt = document.getElementById("formulaire");

formElt.addEventListener("submit", function(e) {
        
    var nom = document.getElementById("nom").value;
    var titre = document.getElementById("titre").value;
    var url = document.getElementById("url").value;
    
    var nouveauLien = Object.create(listeLiens);
    nouveauLien.titre = formElt.titre.value;
    nouveauLien.auteur = formElt.nom.value;
    
    var regexUrl = /(http|https):\/\/.+\.(com|net|org|biz|info|mobi|us|cc|bz|tv|ws|name|co|me|fr)/;

    if(!regexUrl.test(url)) {
        url = "http://"+url;
    }
    
    nouveauLien.url = formElt.url.value;
    var ajouterNouveauLien = creerLien(nouveauLien);

    var lien = document.getElementsByClassName("lien");
    for(var i = 0; i < lien.length; i++){
        document.getElementById("contenu").insertBefore(ajouterNouveauLien, lien[0]);
    }
    
    var msgConfirm = document.createElement("p");
      msgConfirm.textContent = "Le lien " + '"' + nouveauLien.titre + '"' + " a bien été ajouté.";
      msgConfirm.style.color = "#428bca";
      msgConfirm.style.backgroundColor = "#d7ecf6";
      msgConfirm.style.padding = "25px";
      msgConfirm.style.border = "1px solid #428bca";
      msgConfirm.style.borderRadius = "5px";
      document.getElementById("infos").appendChild(msgConfirm);
 
      // Suppression du message de confirmation au bout de 2s
      setTimeout(function () {
        infos.removeChild(msgConfirm);
      }, 2000);
    
    var nom = document.getElementById("nom");
    var titre = document.getElementById("titre");
    var url = document.getElementById("url");
    var boutonValider = document.querySelector("button");
    
    formElt.removeChild(nom);
    formElt.removeChild(titre);
    formElt.removeChild(url);
    formElt.removeChild(boutonValider);
    
    e.preventDefault();
});

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;
}

Mon code n'est sûrement pas du tout quelque chose d'optimisé, j'en suis bien conscient, mais, j'ai pas vraiment le courage à tout modifier vu comment j'ai déjà galéré à écrire tout ça ! Au passage, lorsque j'ai fait l'activité 1; je n'avais pas tout réussit correctement, du coup, j'ai récup' le code de la correction de quelqu'un pour avoir un truc bien fait, donc y'a des p'tits différences entre ce que j'ai fait et ce que l'autr eà fait, mais voilà.

Merci de votre aide !

-
Edité par LordHawk 20 novembre 2017 à 19:10:31

AH oui, c'était bien ça pour mon regex ! Faut vraiment que je fasse plus attention à ses petites erreurs facilement corrigeable ! Merci !

Pour le bouton, j'ai effectivement réinséré le bouton, j'ai du mettre du coup mon deuxième évènement dans le premier, pour y avoir accès, merci pour l'aide !

Maintenant, j'ai une question, il y a eu une mise à jours de Firefox aujourd'hui, et sans arrêt, je recois un message dans la console : "L’attribut « content » des objets Window est obsolète. Veuillez utiliser « window.top » à la place."

Ca veut dire quoi ça? Je suis censé utiliser quoi? Car du coup, Firefox me bloque mon script la deuxième fois en me disant que mon champ "nom" est null. J'ai essayé la page sur Chrome et ça fonctionne sans soucis, c'est donc un prob de Firefox, je dois modifier quoi pour être à jours ? J'ai rien trouvé sur google qui puisse m'expliquer quoi que ce soit là dessus donc j'en profite pour demander ici !

EDIT : en vérifiant sur Chrome, j'ai aussi une erreur au même endroit, donc enfaîte, ça doit venir de mon code, vu qu'il est pas opti' ^^, je vais vérifier ça.

-
Edité par LordHawk 20 novembre 2017 à 22:39:07

LordHawk

20 novembre 2017 à 19:07:06

LCaba

20 novembre 2017 à 19:58:27

Salut,

Faut virer les apostrophes dans les commentaires, c'est pour ça que c'eest tout vert ton code.

C'est pas ta regex qui pose problème c'est ta ligne 126 : tu assignes à ta propriété url la valeur de formElt.url.value au lieu de lui assigner ta variable url.

Pour ton bouton qui disparait, tu peux le résinsérer avec insertBefore à condition que la variable soit accessible d'une fonction à l'autre.

Sinon, le plus simple et le plus intuitif selon moi et de le désactiver pendant l'ajout et de le réactiver ensuite.

Cabinet vétérinaire à Angers

20 novembre 2017 à 22:33:28

Activite 2, gerer l'ajout de nouveaux items soucis

Activite 2, gerer l'ajout de nouveaux items soucis

Supprimer

Modérer

Signaler le message aux modérateurs