cour manipuler le code HTML exercice 3

Sujet résolu

2 juillet 2020 à 13:01:42

Bonjour a tous,

Je suis actuellement en train d'apprendre le javascript avec le cour pour dynamiser nos page web et il y a un exercice ou on nous demande de re-creer en Javascript un certain model (en commentaire ci-dessous). J'ai effectuer l'exercice et j'aimerai savoir pourquoi mon code ne marche pas...Il est différent que celui proposer en correction.

Voici le code:

<!DOCTYPE html>
<html>
<head>
<title>Essai</title>
<meta charset="utf-8">
</head>
<body>
<!--
<div id="divTP3">
<p>Langages basés sur ECMAScript :</p>
<dl>
<dt>JavaScript</dt>
<dd>JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.</dd>
<dt>JScript</dt>
<dd>JScript est le nom générique de plusieurs implémentations d'ECMAScript 3 créées par Microsoft.</dd>
<dt>ActionScript</dt>
<dd>ActionScript est le langage de programmation utilisé au sein d'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator).</dd>
<dt>EX4</dt>
<dd>ECMAScript for XML (E4X) est une extension XML au langage ECMAScript.</dd>
</dl>
</div>
-->

<script type="text/javascript">
//Création du div et du paragraphe et du dl
let div = document.createElement("div");
div.id = "divTP3";

let paragraphe = document.createElement("p");
let phrase = document.createTextNode("Langage basés sur ECMAscript :");
paragraphe.appendChild(phrase);
div.appendChild(paragraphe);

let dl = document.createElement("dl");
div.appendChild(dl);
//tableau reference
let tabdt = [document.createTextNode("Javascript"),
document.createTextNode("JScript"),
document.createTextNode("ActionScript"),
document.createTextNode("EX4")];

let tabdd = [document.createTextNode("JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur."),
document.createTextNode("JScript est le nom générique de plusieurs implémentations d'ECMAScript 3 créées par Microsoft."),
document.createTextNode("ActionScript est le langage de programmation utilisé au sein d'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator)."),
document.createTextNode("ECMAScript for XML (E4X) est une extension XML au langage ECMAScript.")
];
// On creer et insere les dt et dd dans dl
let dt, dd;
for(let i = 0; i < tabdt.lenght; i++){
dt = document.createElement("dt");
dd = document.createElement("dd");

dt.appendChild(tabdt[i]);
dd.appendChild(tabdd[i]);

dl.appendChild(dt);
dl.appendChild(dd);
}

document.body.appendChild(div);
</script>

</body>
</html>

-
Edité par MaximeJean14 2 juillet 2020 à 14:48:07

AbcAbc6

2 juillet 2020 à 14:22:59

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Règles générales du forum

MohamedSow5

2 juillet 2020 à 15:51:48

En me basant sur la logique de ton code.

C'est bien de parcourir tes tableaux mais dans ce contexte ce que tu veux c'est la valeur des éléments du tableau.

//Création du div et du paragraphe et du dl
    let div = document.createElement("div");
    div.id = "divTP3";

    let paragraphe = document.createElement("p");
    let phrase = document.createTextNode("Langage basés sur ECMAscript :");
    paragraphe.appendChild(phrase);
    div.appendChild(paragraphe);

    let dl = document.createElement("dl");
    div.appendChild(dl);
    //tableau reference
    let tabdt = [document.createTextNode("Javascript"),
    document.createTextNode("JScript"),
    document.createTextNode("ActionScript"),
    document.createTextNode("EX4")];

    let tabdd = [document.createTextNode("JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur."),
    document.createTextNode("JScript est le nom générique de plusieurs implémentations d'ECMAScript 3 créées par Microsoft."),
    document.createTextNode("ActionScript est le langage de programmation utilisé au sein d'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator)."),
    document.createTextNode("ECMAScript for XML (E4X) est une extension XML au langage ECMAScript.")
    ];
    for (var i = 0; i < tabdt.length; i++){

        // Il ne faut pas simplement récuprer les éléments du tableau mais la valeur de l'élément
        console.log(tabdt[i].nodeValue);
        
        let dt;
        dt = document.createElement("dt");
        dtCntnt = document.createTextNode(tabdt[i].nodeValue)

        let dd;
        dd = document.createElement("dd");
        ddCntnt = document.createTextNode(tabdd[i].nodeValue)

        dt.appendChild(dtCntnt)
        dd.appendChild(ddCntnt);

        // Affive tes dt et dd
        console.log(dt);
        console.log(dd);

        dl.appendChild(dt);
        dl.appendChild(dd);
    }

    document.body.appendChild(div);

"anegnôn, egnôn, categnôn"

MaximeJean14

3 juillet 2020 à 2:25:37

Merci pour la réponse Mohamed, mais finalement j'ai trouver d'ou venez le problème.

En faites j'avais juste mal écrit le length dans ma boucle (j'ai écrit lenght... à la place). Deux heure a chercher d'ou peut venir le problème pour s’apercevoir que s'est juste un problème d'orthographe.... Comment dire je suis dégoutter haha. Mais bon je suppose qu'il faut en passer par la !

AbcAbc6

3 juillet 2020 à 8:45:34

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet)

MohamedSow5

3 juillet 2020 à 12:53:14

Je vous en pris.

@MaximeJean14 lol ça arrive souvent c'est ce qu'on appel une erreur de syntaxe pour un détail on passe à coté. Mais ça montre aussi qu'il y'a toujours plusieurs manières de faire pour arriver au résultat voulu.

"anegnôn, egnôn, categnôn"