Exercice 4/8

Dans le fichier script.js :

Soit les variables result et longueur déja déclarées.

  • utilisez document.getElementsByTagName() pour récupérer les paragraphes p et affectez le résultat à result;
  • récupérez dans longueur la longueur du tableau;
  • créez une boucle for avec l'itérateur i;
  • dans la boucle affichez chaque élément avec alert();
  • cliquez sur Soumettre ma réponse.

Leçon 4/8

Avec getElementsByTagName() on peut donc récupérer toute une liste d'éléments HTML.

Comment exploiter cette liste ?

Si vous voulez effectuer des actions sur chacun des éléments récupérés il faut les lister un par un. Et pour cela il faut une boucle for par exemple.

C'est pour ça que c'est important de récupérer la longueur de la collection auparavant.

Commentaires les mieux notés

  • philgd28

    Bonjour. Toujours le même souci ... a priori mon code est correct quand je le passe avec bracket en local, et que j'utilise la console (console.log à la place d'alert()), j'ai mais 3 elements <p>, donc est-ce que pour vous c'est correct ou pas ? j'ai comme message d'erreur ""longueur" ne contient pas la valeur attendue. " . merci

  • hakim_yahi-64

    bonjour," recuperez dans longueur la longueur du tableau"... de quel tableau on parle??

  • mram Administrateur

    Oui c'est normal, le message signifie que vous avez bien récupéré un élément HTML de type paragraphe, donc un <p>.

  • mickaelquintin

    Bonjour, Je ne vois pas mon erreur. J'ai le message suivant : "avez vous bien écrit la structure de la boucle FOR". Voici mon code : var result; var longueur; result = document.getElementsByTagName("p"); longueur = result.length; for (i=0; i<longueur; i++){ alert (result[i]); }

60 Commentaires

  • philgd28

    philgd28

    Bonjour. Toujours le même souci ... a priori mon code est correct quand je le passe avec bracket en local, et que j'utilise la console (console.log à la place d'alert()), j'ai mais 3 elements <p>, donc est-ce que pour vous c'est correct ou pas ? j'ai comme message d'erreur ""longueur" ne contient pas la valeur attendue. " . merci

    le 11/08/2017 à 08h22

  • mram

    mram Administrateur

    Bonjour, oui globalement sur les exercices sur le DOM vous avez compris le principe et votre code est correct. Ne tenez pas compte de l'erreur, nous avons un souci avec la correction automatique les exercices sur le DOM en ce moment.

    le 16/08/2017 à 11h18

  • mram

    mram Administrateur

    Oui c'est normal, le message signifie que vous avez bien récupéré un élément HTML de type paragraphe, donc un <p>.

    le 06/10/2016 à 00h43

  • mickaelquintin

    mickaelquintin

    Bonjour, Je ne vois pas mon erreur. J'ai le message suivant : "avez vous bien écrit la structure de la boucle FOR". Voici mon code : var result; var longueur; result = document.getElementsByTagName("p"); longueur = result.length; for (i=0; i<longueur; i++){ alert (result[i]); }

    le 29/11/2016 à 17h18

  • mram

    mram Administrateur

    Il faut mettre l'accolade ouvrante à la ligne 6 je pense.

    le 30/11/2016 à 16h47

  • mram

    mram Administrateur

    Relisez ce que vous avez écrit : .getElementsByName() n'existe pas.

    le 19/10/2016 à 11h08

  • y.redjah

    y.redjah

    Bonjour voci mon code je ne comprends pas pourquoi il ne se valide pas var result = document.getElementsByTagName('p'); var longueur = result.length; for (i = 0; 1 < longueur; i++) { alert(result[i]); }

    le 29/04/2017 à 12h51

  • mram

    mram Administrateur

    J'ai dit reprenez le code de votre 2eme message, pourquoi mettre "longueur.length" (ligne 4) alors que c'était correct avant... Ne changez pas des morceaux de code au hasard, ça ne vous fera que tourner en rond.

    le 16/09/2016 à 14h21

  • mram

    mram Administrateur

    Votre code est à priori correct. Essayez de déclarez d'abord les 2 variables avec "var result, longueur;" puis après attribuer les valeurs correspondantes. Le faire en 2 étapes donc.

    le 04/05/2017 à 12h09

  • mickael.59300

    mickael.59300

    help SVP

    le 06/04/2017 à 14h59

  • mram

    mram Administrateur

    Mettez juste l'accolade ligne 3 à la ligne. Le code est correct sinon.

    le 11/04/2017 à 15h55

  • cdezandee

    cdezandee

    var result = document.getElementsByTagName('p'); var longueur = result.length; for (i=0; i < longueur; i++) { alert(i); }

    le 15/11/2016 à 14h53

  • mram

    mram Administrateur

    Ligne 5, vous ne faites qu'affichez l'itérateur "i" qui sert à parcourir le tableau "result". Or on souhaite afficher l'élément du tableau en cours d'itération dans la boucle, donc "result[i]".

    le 16/11/2016 à 19h46

  • jerome_boucher

    jerome_boucher

    Bonjour, J'obtiens [object HTML collection] en exécutant mon code au lieu de paragraph element Et je ne vois pas ce qui cloche dans mon code

    le 12/09/2016 à 12h55

  • bsmeyers84

    bsmeyers84

    mon code est il bon ? (TYPEERROR: DOCUMENT.GETELEMENTBYTAGNAME IS NOT A FUNCTION)

    le 12/09/2016 à 15h05

  • bsmeyers84

    bsmeyers84

    petite correction suite au message d'hier mais j'ai un nouveau message d'erreur: AVEZ-VOUS AFFECTÉ LE RÉSULTAT DE "GETELEMENTSBYTAGNAME" À "RESULT" ?

    le 13/09/2016 à 12h08

  • bsmeyers84

    bsmeyers84

    derniers ajustent sur cette exercice et voici le message qui s'affiche maintenant: AVEZ-VOUS BIEN AFFICHÉ CHAQUE ÉLÉMENT DU TABLEAU AVEC ALERT() ? j'ai essayer toute les solution qui me venaient à l'idée mais là je bloque totalement .

    le 13/09/2016 à 13h22

  • maksika

    maksika

    var result = document.getElementsByTagName('p'); var longueur = result.length; alert(longueur); for(i=0; i< longueur; i++) { alert (result[i]); } Où est l'erreur ? merci

    le 21/03/2017 à 16h54

  • mram

    mram Administrateur

    @jerome_boucher : il manque juste un petit bout de code ligne 6 : n'oubliez pas que alert() doit afficher l'élément du tableau en cours d'itération dans la boucle...

    le 13/09/2016 à 18h59

  • mram

    mram Administrateur

    @bsmeyers84 : vous allez dans le bon sens la réflexion est bonne, mais votre dernier code ajoute des choses inutiles. Reprenez le code de votre 2ème message en mettant la ligne 7 du code de votre 3ème message.

    le 13/09/2016 à 19h02

  • Shao_pix

    Shao_pix

    bonjour, je n'ai absolument pas compris cette exercice... mareponse est correct par ce qu'elle suis la logique que j'ai aprise daccord... mais je ne comprend pas pourquoi elle m'indique [object HTMLParagraphElement] sur 3 boite de dialogue ... es ce normal ?

    le 04/10/2016 à 15h07

  • Damien

    Damien

    Là, je vois plus où ça coince. Le code fonctionne pourtant : var result, longueur; result = document.getElementsByTagName('p'); longueur = result.length; for (i = 0; i < longueur; i++) { alert(result[i]); }

    le 13/12/2016 à 17h37

  • Shao_pix

    Shao_pix

    daccord .. dans l'exercice suivant on me dit vous avez pu afficher [object HTMLParagraphElement] sur3 boite de dialogue le resultat etaitbien le bon ne tenais pas compte de mon commentaire

    le 04/10/2016 à 15h08

  • bsmeyers84

    bsmeyers84

    code repris comme vous avez demandez mais toujours même message qui s'affiche. "AVEZ-VOUS BIEN AFFICHÉ CHAQUE ÉLÉMENT DU TABLEAU AVEC ALERT() "

    le 13/09/2016 à 23h42

  • mram

    mram Administrateur

    La ligne 3 est inutile, et ligne 6 il faudrait ajouter une tabulation.

    le 24/03/2017 à 10h27

  • mram

    mram Administrateur

    Le code est bon en effet mais il y a un espace en fin de ligne 4 alors qu'on attend un retour à la ligne.

    le 15/12/2016 à 11h39

  • patricerameaux

    patricerameaux

    avez-vous bien affecté le résultat de "getelementsetc à result : que se passe-t-il ?

    le 19/10/2016 à 10h41

  • bretel.val

    bretel.val

    Bonjour, on me demande si j'ai bien déclaré les variables demandées.

    le 21/06/2017 à 14h39

  • mram

    mram Administrateur

    Bonjour, il faut aussi déclarer la variable "i".

    le 21/06/2017 à 17h03

  • ivery23-9

    ivery23-9

    bonjour quel est le probleme ?

    le 20/06/2018 à 18h40

  • mram

    mram Administrateur

    Bonjour, la boucle for est mal écrite (indentation, etc.).

    le 24/06/2018 à 06h28

  • yessingeraud-68

    yessingeraud-68

    Voici mon code. quand je l'execute cela me dit que la variable result ne contient pas p var result = document.getElementsByTagName("p") var longueur=result.length; for (i=0; i<= longueur; i++){ alert(i) }

    le 13/01/2019 à 23h32

  • meriam

    meriam Administrateur

    Bonjour, il faut séparer la déclaration des variables result et longueur de l'affectation, dans la boucle affichez chaque élément du tableau (et non l'indice alert(i)) avec alert().

    le 15/01/2019 à 15h41

  • sylvain074-25

    sylvain074-25

    je ne comprends pas, mon code devrait être juste

    le 13/01/2019 à 14h57

  • meriam

    meriam Administrateur

    Bonjour, il faut séparer la déclaration des variables result et longueur de l'affectation.

    le 15/01/2019 à 14h57

  • djalloh2016-72

    djalloh2016-72

    joli exercice franchement mérité chapeau celui là,,il faire travailler le cerveau mais à vrai dire on fait exactement ce qu'on a déjà vue par le passé

    le 28/02/2018 à 20h48

  • p.laber

    p.laber

    Erreur "Avez-vous bien écrit la structure de la boucle "for" ?" obtenue a chaque boucle "for", même si une fois j'avais copier coller un exemple. La validation est "trop tatillonne" ou bien ne valide pas les bonnes chose, je ne sais pas. Toujours est il que ça reste trop nébuleux pour qu'on puisse rectifier. Pas de numéro de ligne ou de curseur indiquant l'emplacement du probléme. Ca me fait regretter les bons vieux compilateurs. Perso, j'ai laissé tombé les boucles for. Dommage.

    le 15/10/2017 à 23h38

  • mram

    mram Administrateur

    Bonjour, dans les exemples l'accolade { se trouve sur une ligne à part. Idéalement il faudrait faire pareil.

    le 19/10/2017 à 00h39

  • louise.perrollet-33

    louise.perrollet-33

    Bonjour me semble bon mais j'ai toujours ce message d'erreur: "Avez-vous affecté le résultat de "getElementsByTagName" à "result" ?" je ne vois pas ce qui pose problème

    le 11/06/2018 à 15h45

  • samuelvienne-63

    samuelvienne-63

    Bonjour, un petit coup de main svp le correcteur m'indique"Unexpected token )"

    le 17/05/2018 à 18h28

  • mram

    mram Administrateur

    Bonjour, je pense que vous oubliez de déclarer "i".

    le 23/05/2018 à 06h46

  • daviwys

    daviwys

    Bonjour, je ne comprends pas l'énoncé : "récupérez dans longueur la longueur du tableau;". Quelle tableau ? À part des "h1", "p", "ul", "li", "div", je ne vois pas de tableau. J'ai loupé quelque chose ? Si oui, où çà SVP ?

    le 23/09/2017 à 22h52

  • mram

    mram Administrateur

    Bonjour, oui ici on parle de tableau Javascript, et non de tableau HTML. Avec getElementsByTagName() vous récupérez un tableau Javascript de tous les éléments qui ont pu être trouvé.

    le 25/09/2017 à 17h37

  • alexdisdier

    alexdisdier

    mon code marche dans un editeur externe: var result; var longueur; result = document.getElementsByTagName('p'); longueur = result.length; for (var i = 0; i < longueur; i++) { alert(result[i]); }

    le 26/07/2017 à 19h34

  • mram

    mram Administrateur

    Bonjour, oui en effet votre code est correct.

    le 01/08/2017 à 11h58

  • daviwys

    daviwys

    Bonsoir, Je viens de réussir l'exercice. Si j'ai bien compris, le fait de faire "result=getElementsByTagName('p');", celà crée un tableau !? En faite, mon "result" (à ma ligne 3) c'est : "result=['p','p','p','p','p','p','p','p'];" !?

    le 24/09/2017 à 23h57

  • mram

    mram Administrateur

    Bonjour, oui voilà c'est l'idée. Mais dans le cadre du DOM on appelle ça une collection. Mais oui c'est un tableau Javascript. Et chaque élément du tableau correspond à un élément HTML récupéré avec getElementsByTagName

    le 25/09/2017 à 17h47

  • daviwys

    daviwys

    Désolé, je me corrige : y'a pas 8 'p' mais que 2 en faite ! Mais le alert() affiche : [object HTMLParagraphElement]. Ça correspond au type d'élément je pense ?

    le 25/09/2017 à 00h02

  • mram

    mram Administrateur

    Oui c'est ça, le tableau contient bien un élément HTML de type paragraphe, donc un "p" .

    le 25/09/2017 à 17h48

  • samuelvienne-63

    samuelvienne-63

    c'est bon j'ai trouvé...

    le 18/05/2018 à 10h55

  • nkeshimanabrice-37

    nkeshimanabrice-37

    je ne vois pas l'erreur...

    le 17/01/2019 à 14h24

  • meriam

    meriam Administrateur

    Ligne 7, dans la boucle tu dois afficher chaque élément avec alert(), et il faut déclarer la variable i avec le mot clé var.

    le 18/01/2019 à 09h46

  • lienmontage

    lienmontage

    Bonjour mram, vous pouvez me dire ce qui ne va pas dans mon code svp ?

    le 27/03/2018 à 13h57

  • mram

    mram Administrateur

    Bonjour, le code est correct, ajoutez un espace après "for" et ça devrait passer.

    le 30/03/2018 à 02h05

  • radiere.theo-90

    radiere.theo-90

    bonjour, où se trouve mon erreur svp ? le correcteur m'indique "unexpected token )...

    le 25/04/2018 à 11h46

  • mram

    mram Administrateur

    Bonjour, la deuxième ligne est inutile. On souhaite récupérer les éléments "p", pas les "ul". Et vous oubliez de déclarer la variable "i".

    le 29/04/2018 à 03h09

  • belespoir38

    belespoir38

    var result = document.getElementsByTagName("p"); var longueur= document.length; for (i=0; i<document.length; i++) { alert(document[i]); } Je ne trouve pas mon erreur, merci pour votre aide, urgent

    le 14/01/2018 à 13h10

  • mram

    mram Administrateur

    Bonjour, n'oubliez pas de déclarer la variable "i", c'est une variable comme une autre.

    le 17/01/2018 à 19h20

  • bernardraphael13

    bernardraphael13

    bonjour mon code me semble bon var result, longueur; result = document.getElementsByTagName('p'); longueur = result.length; for(i = 1; i < longueur; i++) { alert(result[i]); }

    le 14/06/2017 à 23h09

  • mram

    mram Administrateur

    Bonjour, le code en lui-même est correct, mettez juste l'accolade { à la ligne suivante

    le 21/06/2017 à 14h11

  • carole.bureau123-44

    carole.bureau123-44

    merci de me mentionner mon erreur : var result, longueur ; result = document.getElementsByTagName('p'); longueur = result.length; var i; for (i=0;i<longueur;i++) { alert(result[i]); }

    le 29/03/2018 à 15h40

  • mram

    mram Administrateur

    Bonjour, le code dans les accolades doit être indenté.

    le 01/04/2018 à 02h33

  • bernardraphael13

    bernardraphael13

    bonjour, j'ai essayé en declarant la variable de l'itération var result, longueur; var i; result = document.getElementsByTagName('p'); longueur = result.length; for (i = 0; i < longueur; i++) { alert(result[i]); } j'ai du laisser une coquille ? merci d'avance

    le 18/06/2017 à 08h12

  • mram

    mram Administrateur

    Bonjour, le code est correct, mettez juste l'accolade { à la ligne.

    le 21/06/2017 à 16h38

  • alexismoquet

    alexismoquet

    Bjr, mon code est-il bon svp ?

    le 10/10/2017 à 14h27

  • mram

    mram Administrateur

    Bonjour, vous aviez oublié de déclarer "i" et le contenu de alert() n'était pas bon. Dans la dernière version de votre code il faut coller les parenthèses à "alert" .

    le 12/10/2017 à 16h15

  • armand1807

    armand1807

    de même en testant sur brackets j'ai bien mes 3 paragraphes qui s'affichent avec console.log

    le 18/08/2017 à 11h48

  • mram

    mram Administrateur

    Bonjour, oui votre code est correct :)

    le 22/08/2017 à 12h47

index.html
script.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <h1>Titre h1</h1> <p class="par">Paragraphe 1</p> <h2>Titre h2</h2> <p class="par">Paragraphe 2</p> <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="http://www.google.fr">Item 3</a></li> </ul> <div id="bloc"> <h3>Titre h3</h3> <p class="par">Paragraphe 4</p> </div> <script src="script.js"></script> </body> </html>
var result; var longueur;