Ubuntu-fr

carambar

Js regex et je pense toujours problème avec ces foutus tableau!

Salut,

J'ai pas chômé mais à nouveau problèmes.
1 Les saisies ne s'ajoutent pas en fait elles disparaissent, un problème dans le e.preventDefault je suppose.
2 Le regex ne fonctionne pas!
3 Le message de confirmation ne fonctionne pas!
Une idée?

/* 
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é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);
});
//Changement du titre Activité 1 en Activité 2  
document.querySelector("h1").textContent = "Activité 2"; 
// Bikini est le nom de mon chien, je voulais le placer ;)
function Bikini (id) {
    return document.getElementById(id);
}
 
//Création d'un btn "ajouter un lien" 
Bikini("contenu").insertAdjacentHTML("afterBegin", '<button id="btnElt">Ajouter un lien</button>');
var btnElt = Bikini("btnElt");
btnElt.style.borderRadius = "10px";  
btnElt.style.marginBottom = "15px";  
 
//Lance le formulaire
btnElt.addEventListener("click", function()
    {
        //Création de l'objet "form"
        var form = document.createElement("form");
 
        //Création des champs de saisie
        // titre
        var chpTitre = document.createElement("input");
        chpTitre.id = "chpTitre";
        chpTitre.required = true;  //Saisie obligatoire
        chpTitre.setAttribute("type", "text");
        chpTitre.setAttribute("size", "40");  
        chpTitre.setAttribute("placeholder", "Entrez le titre du lien");  //Place une indication sur ce qu'il faut inscrire dans le chp
 
        // Url
        var chpUrl = document.createElement("input");
        chpUrl.id = "chpUrl";
        chpUrl.required = true;  //Saisie obligatoire
        chpUrl.setAttribute("type", "text");
        chpUrl.setAttribute("placeholder", "Entrez l'url du lien");
        chpUrl.setAttribute("size", "40");
        chpUrl.style.marginLeft = "10px"; 
        // Auteur
        var chpAuteur = document.createElement("input");
        chpAuteur.id = "chpAuteur";
        chpAuteur.required = true; //Saisie obligatoire
        chpAuteur.setAttribute("type", "text");
        chpAuteur.setAttribute("placeholder", "Entrez votre nom");
        chpAuteur.setAttribute("size", "30");
        chpAuteur.style.marginLeft = "10px"; 
        //btn "ajouter"
        var btnAjout = document.createElement("input");
        btnAjout.setAttribute("type", "submit");
        btnAjout.value = "Ajouter";
        btnAjout.style.borderRadius = "10px";
        btnAjout.style.marginLeft = "20px"; 
        //Assemblage des champs
        form.appendChild(chpAuteur);
        form.appendChild(chpTitre);
        form.appendChild(chpUrl);        
        form.appendChild(btnAjout); 
        //Remplacement du btn "ajouter un lien" par le "form"
        Bikini("contenu").replaceChild(form, btnElt); 
        //Relevé des saisies des champs du formulaire 
        form.addEventListener("submit", function(e) {
            e.preventDefault;
        //Vérif url + saisie du chp
            var urlNewLink = chpUrl.value;
            var regexUrl = /^(http|https)\:\/{2}/i;
            if (!regexUrl.test(urlNewLink)) {
                urlNewLink = "http://" + urlNewLink;
            }        
                
            //Création du nouveau lien
            var newLink = {
                titre: chpTitre.value,
                url: urlNewLink,
                auteur: chpAuteur.value
            };
 
            //Ajout du nouveau lien à la liste
            var newLinkElt = creerElementLien(newLink);
            //Placement en haut de la liste
            Bikini("contenu").insertBefore(newLinkElt, document.querySelector(".lien"));

 
            //Création du message confirmant l'ajout
            var message = document.createElement("p");
            message.textContent = "Le lien " + newLink.titre + " a bien été ajouté.";
            message.style.backgroundColor = "#7fffd4";
            //Message placé en haut, au-dessus du btn
            Bikini("contenu").insertBefore(message, btnElt);
            //Supression du message après 2 secondes
            setTimeout(function() {
                Bikini("contenu").removeChild(message);
            }, 2000); 
            btnAjout.appendChild(message);
 
  });
});

Dernière modification par carambar (Le 31/07/2016, à 12:57)

---

sudo apt-get remove --purge les cons

Intel® Core™2 Quad CPU Q6600 @ 2.40GHz × 4 ,12.04 (precise) 64 bits.