Discussion :

[Bob Leponge]

Bonjour,

En premier lieu, j'espère ne pas m'être trompé de section.
Débutant en Js, je me trouve confronté à un problème.
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?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/* 
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 champ
 
        // 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);
 
  });
});

Vous remerciant d'avance

[danielhagnoul]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
form.addEventListener("submit", function(e) {
  e.stopPropagation();
  e.preventDefault();
 
  // votre code...

[Bob Leponge]

Merci en effet j'avais trouver pour e.preventDefault(); qui fonctionne même sans e.stopPropagation(); .

Cordialement