Exercice 5/8

Dans le fichier script.js :

  • déclarez les variables result et longueur;
  • utilisez document.getElementsByClassName() pour récupérer les éléments HTML qui ont la class "par" 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 5/8

Si vous avez réussi l'exercice précédent, vous avez donc pu afficher 3 fois ceci :

 [object HTMLParagraphElement]

Grâce à la boucle vous avez donc pu récupérer les trois paragraphes p qui sont stockés chacun dans un objet.

Pour l'instant, vous savez comment récupérer un ou des éléments HTML. Vous verrez dans les exercices suivant comment agir sur ces éléments HTML et donc le DOM.

Il est aussi possible de récupérer les éléments HTML selon la class css qu'ils possèdent avec la fonction suivante :

.getElementsByClassName()

Elle fonctionne de la même manière que la fonction précédente.

Commentaires les mieux notés

130 Commentaires

  • verone86-58

    verone86-58

    pour l'exercice précédent et celui-ci, on me dit que la variable result ne contient pas les éléments de la balise ("p" et "par"), alors que je les ai bien indiquées... Pourriez-vous me dire quelle est mon erreur svp ?

    le 28/05/2022 à 23h40

  • meriam

    meriam Admin

    Bonjour, il faut déclarer la variable i avec le mot clé var au moment de la création de la boucle for.

    le 07/06/2022 à 10h45

  • meriam

    meriam Admin

    En plus, vous devez séparer la déclaration des variables ainsi que l'affectation des resultats.

    le 07/06/2022 à 10h49

  • orrierechris-18

    orrierechris-18

    bonjour, voici ce que m'affiche le bot "Votre variable result ne contient pas les balises ayant comme classe par" pouvez-vous m'aider ?

    le 22/02/2022 à 13h18

  • meriam

    meriam Admin

    Bonjour, il faut corriger la fonction getElementByClassName(), ajoutez la lettre s pour Element.

    le 22/02/2022 à 13h31

  • yan28-81

    yan28-81

    bonjour pouvez vous me corriger s'il vous plait ? le robot me met votre boucle doit boucler 3 fois ... var result; var longueur; result = document.getElementsByClassName('par'); longueur = result.length; for (var i = 0; i < longueur; i++) &#123;alert(result[i])}

    le 26/11/2021 à 11h02

  • meriam

    meriam Admin

    Bonjour, c'est un bug qui va être résolu . Merci pour votre compréhension.

    le 28/11/2021 à 23h31

  • djawad.mohamed-63

    djawad.mohamed-63

    Bonjour j'ai chercher mais je ne vois pas mon erreurs pouvez-vous m'aider ?

    le 29/06/2021 à 09h48

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 29/06/2021 à 17h23

  • louis.romeas-25

    louis.romeas-25

    Bonjour, j'ai bien effectué var result = document.getElementsByClassName("par"); cependant le bot me dit toujours "Votre variable result ne contient pas les balises ayant comme classe par"je ne sais pas si j'ai fait une erreur

    le 23/06/2021 à 16h26

  • meriam

    meriam Admin

    Bonjour, il faut séparer la déclaration des variables et ainsi que l'affectation des résultats.

    le 24/06/2021 à 11h57

  • gwald43-1

    gwald43-1

    voici mon code var result; var longueur; result = document.getElementsByClassName('par'); longueur = result.length; for (i=0;i<longueur;i++) &#123;alert(result[i]);} même réponse exercice précédent le code tourne en boucle?why?pouvez vous m'aider svp?

    le 27/02/2021 à 10h07

  • meriam

    meriam Admin

    Bonjour, vous devez déclarer la variable i avec le mot clé "var" au moment de la création de la boucle et vous devez ajouter les accolades de la boucle..

    le 03/03/2021 à 08h59

  • mickael5993-78

    mickael5993-78

    bonsoir , sa me marque : Votre boucle for ne contient pas d'instructions Code : "var result; var longueur; result = document.getElementsByClassName('par'); longueur = result.length; for (var i = 0; i < longueur; i++); alert(result[i]);

    le 24/02/2021 à 17h10

  • meriam

    meriam Admin

    Bonjour, vous avez oublié les accolades de la boucle for.

    le 26/02/2021 à 10h38

  • rosirisf77-81

    rosirisf77-81

    bonsoir je n'arrive pas a avance, le robot dit: Votre script a mis trop de temps à s'exécuter, auriez-vous une boucle infinie ?

    le 02/01/2021 à 17h30

  • meriam

    meriam Admin

    Bonsoir, 1 : il faut supprimer le signe "=" entre le mot clé var et le nom de la variable (result et longueur).

    le 06/01/2021 à 17h09

  • Gabriel_Armede-47

    Gabriel_Armede-47

    Bonjour je ne vois pas ou est mon problème encore une fois ...

    le 09/11/2020 à 09h24

  • meriam

    meriam Admin

    Bonjour, votre dernier code est correct.

    le 09/11/2020 à 09h33

  • loutchay-74

    loutchay-74

    Bonsoir, Le correcteur affiche: Votre boucle for ne contient pas d'instructions. Par avance, merci de votre aide.

    le 11/10/2020 à 20h02

  • meriam

    meriam Admin

    Bonjour, supprimez le point-virgule juste aprés la boucle for , aprés la déclaration de la boucle for on n'ajoute pas un point virgule.

    le 13/10/2020 à 12h33

  • thomas.feuga-51

    thomas.feuga-51

    Bonjour, je n'arrive pas à valider cet exercice, voici mon code : var result; var longueur; result = document.getElementsByClassName("par"); longueur = result.length; for(i = 0; i < longueur; i++) &#123; alert(result[i]) }

    le 17/08/2020 à 12h05

  • meriam

    meriam Admin

    Bonjour, il faut déclarer la variable i avec le mot clé var au moment de la création de la boucle.

    le 24/08/2020 à 13h36

  • darek_kozaczek-68

    darek_kozaczek-68

    var result; var longueur; result = document.getElementsByClassName('par'); longueur = result.length; for (var i = 0; i < longueur; i++)&#123; alert(result[i]); } //robot dit : Votre boucle for ne doit boucler que 3 fois

    le 29/06/2020 à 07h10

  • meriam

    meriam Admin

    Votre code est correct.

    le 29/06/2020 à 18h39

  • vimper3-1

    vimper3-1

    pour valider cet exercice j'ai du faire comme l'exercice précédent. var result; var longueur; result = document.getElementsByClassName("par"); longueur = result.length; for (var i = 0; i < longueur; i++)&#123; alert(result[i]); }

    le 23/11/2019 à 12h26

  • takfa

    takfa

    merci bcp meriem voila le bon code pour ceux qui galèrent var result; var longueur; result = document.getElementsByClassName("par"); longueur = result.length; for(var i=0;i<longueur;i++) &#123;alert(result[i]);}

    le 21/11/2019 à 21h41

  • valmasse-10

    valmasse-10

    c'est bon ! ;)

    le 18/10/2019 à 19h48

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>