Sujet Précédent Sujet Suivant

Probleme d'affichage sur le DOM

Fermé
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - Modifié le 30 nov. 2018 à 16:57
jordane45 Messages postés 38353 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 décembre 2024 - 2 déc. 2018 à 17:12
Bonjour,
Je suis en train d'apprendre le javascript et je suis sur un exercice qui me pose probleme .. ma compréhension n'étant pas encore parfaite j'ai besoin de pistes pour resoudre ce probleme
Vous pourrez acceder au code ici https://jsfiddle.net/df6n9Lm5/1/
Et le resultat attendu est celui ci https://static.oc-static.com/prod/courses/files/creez-des-pages-web-interactives-avec-javascript/activite1_2.png
Sans me donner la solution, est-ce que quelqu'un pourra m'indiquer mes erreurs et peut être des notions que je dois revoir pour terminer cet exercice et mieux comprendre le fonctionnement
Merci d'avance !


Configuration: Windows / Firefox 63.0

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38353 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 décembre 2024 4 719
30 nov. 2018 à 17:01
Bonjour,

1 - Merci de poster ton code directement sur le forum: https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code


2 - Si le souci concerne un dysfonctionnement du code, pense à regarder dans la CONSOLE de ton navigateur si il n'y aurait pas d'éventuelles erreurs.

3 - Merci d'expliquer exactement le souci rencontré. En expliquant avec des phrases le comportement attendu et celui constaté... en expliquant en quoi cela ne correspond pas avec ce que tu essais de faire.
Nous balancer deux url sans explication n'a aucun intérêt.....


0
Réponse 2 / 4
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
Modifié le 30 nov. 2018 à 19:28
Très bien alors voici le code en question :
Partie HTML : 
<!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>

    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>

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

</html>

Partie CSS: 
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;
}

Et enfin partie Javascript: 
/* 
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"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web

var divElt = document.createElement("div"); // Création de la liste

// Pour chaque mot, on construit une balise avec le terme et une balise avec sa définition
listeLiens.forEach(function () {
    var divSoFoot = document.createElement("div");
    divSoFoot.id = "foot";
    var divGuide = document.createElement("div");
    divGuide.id = "guide";
    var divWiki = document.createElement("div");
    divWiki.id = "wiki"

    var titreElts = document.createElement("p");
    titreElts.textContent = listeLiens.titre;
    var lienElts = document.createElement("a");
    lienElts.textContent = listeLiens.url;
    lienElts.href = listeLiens.url;
    var auteurElts = document.createElement("p");
    auteurElts.textContent = listeLiens.auteur;

    divSoFoot.appendChild(titreElts);
    divSoFoot.appendChild(lienElts);
    divSoFoot.appendChild(auteurElts);

    divGuide.appendChild(titreElts);
    divGuide.appendChild(lienElts);
    divGuide.appendChild(auteurElts);

    divWiki.appendChild(titreElts);
    divWiki.appendChild(lienElts);
    divWiki.appendChild(auteurElts);

    divElt.appendChild(divSoFoot);
    divElt.appendChild(divGuide);
    divElt.appendChild(divWiki);

});

document.getElementById("contenu").appendChild(divElt); // Ajout de la liste à la page

EDIT : Ajout des balises de code

________________________________________________________________________________________________

Je dois inserer la liste de liens présente dans javascript en HTML et appliquer des propriétés directement dans le javascript a l'aide de la propriété .style.color ou autre
Pour le moment j'essaye juste d'afficher cette liste avec une div pour chaque option "So foot", "guide", "wiki", ainsi que leur liens et auteur dans le HTML mais je n'y parviens pas

La console ne m'affiche pas de problemes particulier mais je pense qu'il doit y avoir des erreurs évidents pour vous mais pas assez pour moi visiblement, donc si vous pouviez m'indiquer mes erreurs et des pistes pour que je puisse les résoudre par moi même ça serait sympa :)
0
Réponse 3 / 4
jordane45 Messages postés 38353 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 décembre 2024 4 719
30 nov. 2018 à 19:32
Déjà.. tu aurais pu mettre les balises de code comme je te l'avais demandé (voir le lien que je t'avais donné.....)
Ensuite, ton problème se trouve dans ta boucle 
listeLiens.forEach(function (el) {
    var divSoFoot = document.createElement("div");
    divSoFoot.id = "foot";
    var divGuide = document.createElement("div");
    divGuide.id = "guide";
    var divWiki = document.createElement("div");
    divWiki.id = "wiki"

    var titreElts = document.createElement("p");
    titreElts.textContent = el.titre;
    var lienElts = document.createElement("a");
    lienElts.textContent = el.url;
    lienElts.href = el.url;
    var auteurElts = document.createElement("p");
    auteurElts.textContent = el.auteur;

    divSoFoot.appendChild(titreElts);
    divSoFoot.appendChild(lienElts);
    divSoFoot.appendChild(auteurElts);

    divGuide.appendChild(titreElts);
    divGuide.appendChild(lienElts);
    divGuide.appendChild(auteurElts);

    divWiki.appendChild(titreElts);
    divWiki.appendChild(lienElts);
    divWiki.appendChild(auteurElts);

    divElt.appendChild(divSoFoot);
    divElt.appendChild(divGuide);
    divElt.appendChild(divWiki);

});

0
Réponse 4 / 4
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019
2 déc. 2018 à 16:04
Merci beaucoup ! En effet je n'avais pas vraiment declaré la fonction, d'où le probleme ...
0
jordane45 Messages postés 38353 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 décembre 2024 4 719
2 déc. 2018 à 17:12
pense à mettre le sujet en résolu :
https://www.commentcamarche.net/infos/25917-marquer-un-fil-de-discussion-comme-etant-resolu/

.
0

Discussions similaires

adele
marine carnet-pantier -
irongege -

2 réponses
Avis site Crush dom tom / crushdomtom.com
Juanmarco33@ -
Afrikarnak -

11 réponses
Leboncoin : j'ai un problème d'affichage
maria1508 -
msi123 -

5 réponses
pas d'accès aux photos sur le bon coin!!!
pat -
didite -

4 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses