Discussion :

[corinne95]

Bonjour,

Je suis novice dans le langage Javascript et je fais des tutos sur internet pour apprendre, mais j'avoue avoir des difficultés.
Voilà, j'ai un exercice à faire dans lequel je dois ajouter des nouveaux liens sur une page à l'aide d'un formulaire.
Ces nouveaux champs doivent apparaitre en haut.
Lorsque le nouveau lien est créé, un message doit s'afficher pendant 2 secondes indiquant que le lien a bien été ajouté, et le nouveau lien doit être ajouté en haut de la liste.
J'ai créé le bouton "ajouter un lien" et le formulaire avec les champs à remplir.
Mais le bouton et les champs à remplir reste en bas de la liste même en utilisant "insertBefore" et mon message ne s'affiche pas et mon nouveau lien n'est pas ajouté à ma liste.

Pouvez-vous m'aider ?

Je joins les fichiers js -html et css.

Merci de votre aide
Corinne

[corinne95]

Oups, je n'ai pas envoyé le bon fichier js, car depuis j'ai apporte des modifications.
Je le le remets
exercice.zip

[JujuPomme]

Bonjour,

Peux-tu mettre tes codes directement ici entre les balises [CODE ][/CODE ] (sans espace).

Si on doit télécharger les sources de tout le monde, on s'en sort vite plus... Merci

[corinne95]

Bonjour,

désolée, je ne savais pas ce qui était le plus pratique !

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
158
159
// 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);
});
 
/*
Exercice 2 - Gérer des nouveaux liens
*/
 
//création du bouton
var ajoutBoutonElt = document.createElement("p");
    ajoutBoutonElt.id= "bouton";
var boutonElt = document.createElement("button");
      boutonElt.textContent = "Ajouter un lien";
      boutonElt.style.margin = "10px";
    ajoutBoutonElt.appendChild(boutonElt);
 
document.getElementById("contenu").appendChild(ajoutBoutonElt);
 
 
boutonElt.addEventListener("click", function () {
//Création du formulaire
    var formElt = document.createElement("form");
          formElt.id = "formulaire";
    ajoutBoutonElt.innerHTML = "";
    ajoutBoutonElt.appendChild(formElt);
 
//création des champs de saisie
    var titre = document.createElement("input");
        titre.type = "text";
        titre.id = "titre";
        titre.placeholder = "Entrez le nom du lien";
        titre.style.margin = "10px";
        titre.style.width= "350px";
        titre.required = true;
 
    var url = document.createElement("input");
        url.type = "text";
        url.id = "url";
        url.placeholder = "Tapez l'url";
        url.style.width= "350px";
        url.required = true;
 
    var auteur = document.createElement("input");
        auteur.type = "text";
        auteur.id = "auteur";
        auteur.placeholder = "Entrez votre nom";
        auteur.required = true;
        auteur.style.width= "350px";
 
    var valide = document.createElement("input");
        valide.type = "submit";
        valide.value = "Envoyer";
        valide.style.margin = "10px";
 
        formElt.appendChild(auteur);
        formElt.appendChild(titre);
        formElt.appendChild(url);
        formElt.appendChild(valide);
 
// Envoi du formulaire avec ajout du préfixe http://
formElt.addEventListener("submit", function(e) {
         var valeurUrl = url.value;
        // Si l'URL ne commence ni par "http://" ni par "https://"
        if ((url.indexOf("http://") !== 0) && (url.indexOf("https://") !== 0)) {
            // On préfixe par "http://"
            url = "http://" + url;
        } 
 
// Création de l'objet contenant les données du nouveau lien
        var nouveauLien = Object.create(listeLiens);
            titre: titre.value;
            url: url.value;
            auteur: auteur.value;
 
 
        var lienElt = creerElementLien(nouveauLien);
            // Ajoute le nouveau lien en haut de la liste
            contenuElt.insertBefore(lienElt, contenuElt);
 
            //Création du message d'information
            var infoElt = document.createElement("p");
                  infoElt.id = "message";
                  infoElt.style.backgroundColor= "#ccedf0";
                  infoElt.style.height = "50px";
                  infoElt.style.width = "100%";
                  infoElt.style.textAlign = "center";
                  infoElt.style.fontSize = "20px";
                  infoElt.style.fontWeight = "bold";
                  infoElt.style.color = "#428bca";
                  infoElt.textContent = "Le lien \"" + nouveauLien.titre + "\" a bien été ajouté.";
 
 
            // Suppression du message après 2 secondes
            setTimeout(function () {
                var infoMsg = document.getElementById("message");
                    infoMsg.style.display = "none";
           }, 2000);
 
            // Remplace le formulaire d'ajout par le bouton d'ajout
            ajoutBoutonElt.innerHTML = "";
            ajoutBoutonElt.appendChild(boutonElt);
        });
});

Merci

[corinne95]

J'ai résolu le problème pour afficher mon bouton en haut de ma page, j'ai modifié mon code comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
Activité 2
*/
 
//création de l'élément conteneur du bouton
var paragraphe = document.createElement("div");
    paragraphe.id= "bouton";
// Création du bouton pour ajouter un lien
var boutonElt = document.createElement("button");
      boutonElt.textContent = "Ajouter un lien";
      boutonElt.style.margin = "10px";
    paragraphe.appendChild(boutonElt);
 
  document.body.insertBefore(paragraphe, contenu);

Bon, je ne sais pas si c'est la meilleure solution mais ça fonctionne.
Par contre j'ai toujours mes deux autres problèmes concernant mon message qui indique que le lien a bien été ajouté qui ne s'affiche pas et, les nouveaux liens ajouté qui ne s'ajoutent pas dans ma liste.
Si vous pouvez m'aider et me dire où sont mes erreurs.
Merci beaucoup