Exercice 8/8

Dans le fichier script.js :

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

  • utilisez document.querySelectorAll() pour récupérer tous les li 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 8/8

Pour récupérer une liste de plusieurs éléments HTML toujours en utilisant les sélecteurs css, il faut utiliser la fonction .querySelectorAll().

Cette fonction récupère aussi une liste (ou collection) d'éléments (comme getElementsByTagName() et getElementsByClassName()). Il faut donc une boucle pour parcourir les résultats.

Commentaires les mieux notés

  • triplaxs

    result; longueur; result=document.querySelectorAll("li,p"); longueur=result.length; for(var i=0; i<longueur;i++); { alert(result[i]); } Que faire?

  • robin.gouverner-84

    Bonjour, cela fait plusieurs exercices que j'obtient un message d'erreur lors de la soumission du code : votre variable longueur ne contient pas la longueur de result. Pourtant j'ai bien affecté result.length, et le retour dans alert est correct. Cordialement

  • patricerameaux

    j'ai comme message d'erreur "li is not defined" comment l'interpréter ?

  • mram Administrateur

    Ligne 3, il faut mettre "li, p" entre guillemets sinon Javascript les interprète comme des variables (et elle n'existe pas) ........

86 Commentaires

  • triplaxs

    triplaxs

    result; longueur; result=document.querySelectorAll("li,p"); longueur=result.length; for(var i=0; i<longueur;i++); { alert(result[i]); } Que faire?

    le 04/09/2017 à 17h25

  • mram

    mram Administrateur

    Bonjour, juste revoir l'indentation des trois dernières lignes, sinon le code est correct.

    le 06/09/2017 à 11h41

  • patricerameaux

    patricerameaux

    j'ai comme message d'erreur "li is not defined" comment l'interpréter ?

    le 19/10/2016 à 16h14

  • mram

    mram Administrateur

    Ligne 3, il faut mettre "li, p" entre guillemets sinon Javascript les interprète comme des variables (et elle n'existe pas) ........

    le 20/10/2016 à 13h03

  • jovidal

    jovidal

    ça n'a aucune importance de mettre " " au lieu de ' ' hein ? on est d'accord ? ("li, p") ou ('li, p')

    le 06/06/2017 à 14h09

  • patricerameaux

    patricerameaux

    maintenant : "reference error li is not defined" bof ...

    le 19/10/2016 à 14h17

  • jovidal

    jovidal

    J'ai un bug très gênant ! Quand je reviens sur certaine page validé, son contenu est remplacé par un autre code bizare .. M'invalidant par la même occasion l'exo et m'obligeant a le refaire.. c'est fort désagréable et énervant de perdre du temps sur ça ! voici le nouveau code qui est apparu var result; var longueur; result = document.querySelectorAll("li, p"); longueur = document.querySelectorAll("li, p").length; for (i=0; i<longueur; i++)="" {="" alert(result[i]);="" }<="" div=""> </longueur;>

    le 06/06/2017 à 14h21

  • patricerameaux

    patricerameaux

    bon qu'est-ce qui ne va pas ?

    le 19/10/2016 à 14h07

  • santikush

    santikush

    J'avoue ne pas comprendre où est mon erreur

    le 24/05/2017 à 16h07

  • mram

    mram Administrateur

    Oui c'est un bug connu qui sera corrigé. Et en effet, être obligé de tout refaire est frustrant, nous en sommes conscient.

    le 07/06/2017 à 13h49

  • mram

    mram Administrateur

    Et mettre "..." ou '...' ne change rien, c'est la même chose.

    le 07/06/2017 à 13h49

  • ctt

    ctt

    Message "Avez-vous bien écrit la structure de la boucle for ?" Pouvez-vous m'aider ?

    le 22/12/2016 à 19h46

  • pascal-ds

    pascal-ds

    ah, il suffisait de ne pas mettre >. Ceci dit, j'ai du chercher, en tombant sur des informations pas toujours très claires exemple sur 3w.org "A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">". " et c'est sur css3create.com, qu'est venue l'explication : "Cet exemple cible le premier <li> de la balise <ul> ul li:first-child{ ... }" mais je n'ai pas vu cette définition ailleurs...(il faut dire que les cours sont assez touffus...)

    le 06/09/2016 à 08h59

  • mram

    mram Administrateur

    Oui, idéalement il faudrait un retour à la ligne avant la première accolade ligne 5. C'est pour qu'elle soit au même niveau d'indentation que l'accolade fermante.

    le 26/12/2016 à 10h53

  • mram

    mram Administrateur

    Et oui "a > b" sert à cibler toute balise "b" directement contenue dans une balise "a", d'où le nom de sélecteur d'enfant. Ici on souhaite pas cibler d'enfants mais toutes les balise "li" et toutes les balises "p".

    le 06/09/2016 à 14h12

  • mram

    mram Administrateur

    Ligne 5 il ne faut pas mettre juste "result". N'oubliez pas qu'on parcoure un tableau ordonné.

    le 29/05/2017 à 15h19

  • cdezandee

    cdezandee

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

    le 15/11/2016 à 15h22

  • florent.dinet

    florent.dinet

    doit-on utiliser querySelector() ou querySelectorAll() ? et comment récupérer les "li" ainsi que les "p" ? peut-on le faire dans la même commande ?

    le 15/07/2016 à 18h30

  • florent.dinet

    florent.dinet

    Avez-vous utilisé un sélecteur css correct et affecté le résultat à "result" ?

    le 15/07/2016 à 18h38

  • mram

    mram Administrateur

    Oui c'est bien .querySelectorAll(), je vais mettre à jour les instructions. Pour l'erreur, mettez un espace entre la virgule et le p dans le sélecteur.

    le 18/07/2016 à 10h40

  • mram

    mram Administrateur

    Ligne 5, on souhaite afficher l'élément en cours d'itération du tableau "result"

    le 16/11/2016 à 19h58

  • laila86

    laila86

    merci :)

    le 01/01/2018 à 04h05

  • dabernier44-12

    dabernier44-12

    je ne vois pas mon erreur : var result; var longueur; var i; result = document.querySelectorAll('li,p'); longueur = result.length; for (i=0;i<longueur;i++) { alert(result[i]); }

    le 13/02/2018 à 10h13

  • mram

    mram Administrateur

    Bonjour, votre code semble correct. Quel message d'erreur avez-vous ?

    le 15/02/2018 à 23h35

  • Carine1972

    Carine1972

    Bonjour. Avez-vous utilisé un sélecteur css correct et affecté le résultat à "result" ? Je ne vois pas où est mon erreur...

    le 29/09/2017 à 18h01

  • mram

    mram Administrateur

    Bonjour, le code est correct, mais on vérifie qu'il y a un espace après la virgule aussi (ligne 1).

    le 30/09/2017 à 14h55

  • nadaljeanyves-70

    nadaljeanyves-70

    Bonjour Meriam, je l'ai fait après mais toujours pas de validation de l'exercice.

    le 25/06/2019 à 10h01

  • meriam

    meriam Administrateur

    Bonjour, il faut récupérer les li uniquement et non pas les p. Pour la variable i, il faut la déclarer au moment de création de la boucle for : for ( var i=0; i<longueur; i++) { alert(result[i]); }

    le 25/06/2019 à 11h15

  • govehovitch.camille-61

    govehovitch.camille-61

    Bonjour, quand je valide mon code, l'exo me répond "erreur interne" ai je cassé qqch? var result; var longueur; result = document.querySelectorAll("ul > li"); longueur = result.length; for (var i = 0; i < longueur; i++){ alert(longueur); };

    le 10/06/2019 à 16h24

  • meriam

    meriam Administrateur

    Bonjour, erreur à la ligne 3: result = document.querySelectorAll("p > li"), le sélecteur p > li que vous avez utilisé n'est le bon sélecteur parce que li n'est pas l'enfant direct de l'élément p. Dans la boucle , il faut parcourir le tableau et afficher chaque élément du tableau avec alert (vous avez affiché la longueur du tableau .

    le 11/06/2019 à 11h18

  • meriam

    meriam Administrateur

    Bonjour, erreur à la ligne 3: result = document.querySelectorAll("p > li"), le sélecteur p > li que vous avez utilisé n'est pas le bon sélecteur parce que li n'est pas l'enfant direct de l'élément p. Dans la boucle , il faut parcourir le tableau et afficher chaque élément du tableau avec alert (vous avez affiché la longueur du tableau .

    le 11/06/2019 à 11h19

  • philgd28

    philgd28

    Bonjour. Et oui le samedi aussi ... loll. Tous pour vous demander si mon code et valide, car je pense que oui, mais j'ai cette erreur récurrente dans beaucoup d'exercice ""longueur" ne contient pas la valeur attendue." Merci de vos lumières.

    le 12/08/2017 à 16h39

  • mram

    mram Administrateur

    Bonjour, comme j'ai dit pour les autres exercices sur le DOM, la correction bug sur ces exercices en particulier. Votre code est juste.

    le 16/08/2017 à 14h48

  • il_matador

    il_matador

    Il me demande de verifier si j'ai bien declare les variables; c'est quoi l'erreur ici? var result = document.querySelectorAll("li, p"); var longueur = result.length; for (i=0; i<longueur; i++) { alert(result[i]); }

    le 13/09/2017 à 15h31

  • mram

    mram Administrateur

    Bonjour, il faut mettre "var" aussi pour déclarer "i"

    le 14/09/2017 à 13h33

  • mariegade

    mariegade

    Bonjour, mon code est-il correct? L'erreur :Avez-vous utilisé un sélecteur css correct et affecté le résultat à "result" ? var result=document.querySelectorAll("li, p"); var longueur=result.length; for (var i=0; i<longueur; i++) { alert(result[i]) ; }

    le 31/10/2017 à 14h13

  • mram

    mram Administrateur

    Bonjour, oui le code est correct. Mais ajoutez des espaces autour des " = " pour plus de lisibilité.

    le 31/10/2017 à 23h41

  • djalloh2016-72

    djalloh2016-72

    on peut bel et bien valider cet exo hein pour ceux qui disent validation impossible,il n'y a aucune erreur all is possible if we want to doing somethings the best,,,the programing skills

    le 28/02/2018 à 21h35

  • djalloh2016-72

    djalloh2016-72

    pour la petite info mettez juste un espace après la virgule("li, p") dans le result; pour ceux qui ont compris de quoi je parle.merci

    le 28/02/2018 à 21h37

  • nkeshimanabrice-37

    nkeshimanabrice-37

    pouvez-vous me corriger...

    le 15/01/2019 à 09h47

  • meriam

    meriam Administrateur

    il faut déclarer la variable i au moment de la création de la boucle.

    le 15/01/2019 à 16h22

  • louise.perrollet-33

    louise.perrollet-33

    Bonjour, je n'ai pu valider aucun exercice dans les DOM j'ai toujours le même message d'erreur me demandant si j'ai bien utilisé le selecteur css et bien affecter à result.. est-ce normal?

    le 11/06/2018 à 16h38

  • mram

    mram Administrateur

    Bonjour,

    Non ce n'est pas normal, je viens de tester et j'ai pu valider cet exercice. Essayez de mettre le sélecteur CSS dans des guillemets simples.

    le 19/06/2018 à 04h15

  • alexdisdier

    alexdisdier

    Je ne comprends pas, je fais tous les exercices dans un text editor atom et j'ai aucun probleme. Par contre, aucun ne se valide sur votre text editor. var result; var longueur; result = document.querySelectorAll("li, p"); longueur = result.length; for (var i=0; i<longueur; i++) { alert(result[i].textContent); console.log(result[i].textContent); } "Le textContent etait juste pour moi pour verifier

    le 26/07/2017 à 19h48

  • mram

    mram Administrateur

    Bonjour, oui en effet ce n'est pas normal. Votre code est correct et d'habitude ces exercices ne posent pas de souci. C'est noté .

    le 01/08/2017 à 12h04

  • rom1.dev.web

    rom1.dev.web

    Bonjour mon code est t'il correct :

    le 23/08/2017 à 16h09

  • mram

    mram Administrateur

    Oui le code est bon. Le souci sur tous les exercices DOM a été corrigé aujourd'hui.

    le 24/08/2017 à 22h54

  • rom1.dev.web

    rom1.dev.web

    var result; var longueur; result = document.querySelectorAll('li, p'); longueur = result.length; for (var i = 0; i < longueur; i++) { alert(result[i]); } je n'ai pu valider aucun exercice dans le DOM est ce normal ?

    le 23/08/2017 à 16h11

  • mram

    mram Administrateur

    Oui on avait un souci sur tous les exercices DOM, ça a été corrigé aujourd'hui.

    le 24/08/2017 à 22h55

  • rachid

    rachid

    Je suis frustre des exercices DOM. J'ai suivi les instructions a la lettre, mais ça n'a rien donne. A plusieurs reprise, j'ai retente l'exercice mais sans succès....

    le 23/12/2017 à 20h58

  • mram

    mram Administrateur

    Bonjour, votre code est correct mais vous oubliez de déclarer la variable "i" . Sinon le reste est bon.

    le 30/12/2017 à 11h38

  • aymoh-14

    aymoh-14

    JARRIVE PAS AVANCER

    le 13/12/2018 à 17h20

  • meriam

    meriam Administrateur

    1 : pas besoin de déclarer les variables longueur et result deux fois, 2 : déclarez la variable i au niveau de la boucle et pas avant la boucle, 3 sélectionner les li seulement et pas les p.

    le 13/12/2018 à 17h59

  • paradise

    paradise

    Bonjour, je ne vois pas mon erreur

    le 17/09/2017 à 14h31

  • mram

    mram Administrateur

    Bonjour, votre code semble correct. Quelle erreur avez-vous ?

    le 20/09/2017 à 15h18

  • delbarj-28

    delbarj-28

    Bonjour voici mon code : var result; result = document.querySelectorAll('li, p'); var longueur; longueur = result.length; for (var i=0; i<longueur; i++){ alert(result[i]) } Je ne comprend pas l'erreur donné : Votre variable result ne contient pas les balises li surtout que dans mes alert je vois passer mes "li"

    le 16/11/2018 à 15h59

  • meriam

    meriam Administrateur

    utilisez document.querySelectorAll() pour récupérer tous les li et affectez le résultat à result (pas besoin de sélectionner les p).

    le 26/11/2018 à 10h46

  • tjmasiee-86

    tjmasiee-86

    Bonjour correction faite et aucun changement

    le 12/04/2019 à 10h05

  • meriam

    meriam Administrateur

    Bonjour, il faut déclarer la variable i avec var au moment de la création de la boucle for comme : for(var i =0; i< longueur;i++) { }

    le 12/04/2019 à 11h41

  • YD.

    YD.

    Bonjour quel est le probleme ?

    le 06/11/2017 à 16h34

  • mram

    mram Administrateur

    Bonjour, il faut bien coller les parenthèses au nom des fonctions : alert(), prompt() ... La dernière version de votre code est correcte. Vous avez pu valider ?

    le 07/11/2017 à 23h09

  • lienmontage

    lienmontage

    Bonjour mram, mon code marche, mais le robot me demande toujours si j'ai bien écrit la boucle -> for

    le 27/03/2018 à 15h24

  • mram

    mram Administrateur

    Bonjour, oui le code est fonctionnel mais on souhaite que vous mettiez un espace après "for" .

    le 30/03/2018 à 02h12

  • nathalie.chenparis

    nathalie.chenparis

    Bonjour, je pense que mon code est bon mais il me demande si j'ai bien écrit la boucle FOR: var result = document.querySelectorAll('li, p'); var longueur = result.length; for (var i = 0; i < longueur; i++); { alert(result[i]); }

    le 22/05/2018 à 10h45

  • mram

    mram Administrateur

    Bonjour, on ne met jamais de ; à la fin de la ligne "for", ce n'est pas une instruction.

    le 28/05/2018 à 04h06

  • megane.lacheny

    megane.lacheny

    Bonjour, j'ai une erreur qui dit : Avez-vous utilisée un sélecteur css correct et affecté le résultat à "result"? je ne comprend pas où se trouve l'erreur car le alert affiche bien les éléments li et p. voici mon code : var result; var longueur; var i; result = document.querySelectorAll("li,p"); longueur = result.length; for (i=0; i<longueur; i++) { alert(result[i]); }

    le 28/12/2017 à 13h42

  • mram

    mram Administrateur

    Bonjour, votre code est correct, par contre on vérifie aussi que dans le sélecteur CSS il y ait un espace après la virgule.

    le 31/12/2017 à 18h36

  • belespoir38

    belespoir38

    document.querySelectorAll("h2, div, span"); Partant de cet exemple de syntaxe je vous propose var result; var longueur; result= document.querySelectorAll('li, p'); longueur=result.length; for (i=0; i<longueur; i++) { alert(result[i]); } Vous me répondez "avez-vous déclarer les bonne variables?". Je vais encore chercher mais une petite aide serait la bienvenue. Merci

    le 14/01/2018 à 15h06

  • mram

    mram Administrateur

    Bonjour, n'oubliez pas de déclarer la variable "i" :)

    le 17/01/2018 à 19h29

  • jwagret

    jwagret

    bonjour il me demande si j'ai bien utilisé le selecteur css et bien affecter a result... je vois pas pourquoi il me met l'erreur.

    le 26/08/2017 à 16h28

  • mram

    mram Administrateur

    Bonjour, je ne vois pas non plus, votre code semble correct. Vous avez pus valider l'exercice finalement.

    le 30/08/2017 à 13h46

  • radiere.theo-90

    radiere.theo-90

    bonjour, unexpected token )...

    le 26/04/2018 à 11h24

  • mram

    mram Administrateur

    Bonjour, ok j'ai trouvé votre erreur. Dans le "for" il faut des ; pour séparer les instructions et non des virgules. Si vous avez la même erreur ailleurs ça doit venir de là.

    le 29/04/2018 à 03h37

  • triplaxs

    triplaxs

    var result; result = document.querySelector("ul > li"); alert(result);l'indentation des trois dernières lignes,a était corriger . Que faire?

    le 08/09/2017 à 08h41

  • mram

    mram Administrateur

    Bonjour, il faut bien mettre "var" devant la variable quand on la déclare, ce que vous n'aviez pas fait. Mais là votre code semble correct.

    le 12/09/2017 à 16h05

  • YD.

    YD.

    Oui parfait merci

    le 08/11/2017 à 10h16

  • veronique.nollet

    veronique.nollet

    Bonjour, j'ai le message suivant : Avez-vous utilisé un sélecteur css correct et affecté le résultat à "result" ? var longueur; var i = 0; result = document.querySelectorAll("li", "p"); longueur = result.length; for (i = 0; i < longueur; i++) { alert(result[i]); } Je ne vois pas où peut se trouver mon erreur. ???

    le 09/05/2018 à 17h29

  • mram

    mram Administrateur

    Bonjour, il faut mettre qu'une seule paire de guillemets pour le sélecteur CSS.

    le 14/05/2018 à 03h02

  • mram

    mram Administrateur

    Et c'est soit des guillemets simples '...' ou doubles "..." .

    le 14/05/2018 à 03h02

  • bernardraphael13

    bernardraphael13

    bonjour, j'ai un problème récurrent de déclaration des variables. L'affichage du résultat est correct voila mon code, pouvez vous me dire où je me suis trompé merci d'avance .

    le 16/06/2017 à 09h31

  • mram

    mram Administrateur

    Bonjour, le code est correct, ligne 4 il y a juste un espace en trop en fin de ligne.

    le 21/06/2017 à 16h18

  • bernardraphael13

    bernardraphael13

    mon code var result = document.querySelectorAll('li, p'); var longueur = result.length; for (i=0; i < longueur; i++) { alert(result[i]); } merci d'avance

    le 16/06/2017 à 09h31

  • mram

    mram Administrateur

    Idem, ligne 4 il y a des espaces en trop en fin de ligne.

    le 21/06/2017 à 16h20

  • berthelotlaurent

    berthelotlaurent

    validation impossible !

    le 09/01/2018 à 18h41

  • mram

    mram Administrateur

    Bonjour, pourquoi tout votre code est-il indenté au début de chaque ligne ?

    le 12/01/2018 à 02h07

  • celeste_a

    celeste_a

    Bonjour, je ne vois pas mon erruer, merci

    le 09/01/2019 à 19h52

  • meriam

    meriam Administrateur

    Bonjour, vous devez récupérer seulement les li et affectez le résultat à result, les paragraphes ne sont pas demandés.

    le 11/01/2019 à 10h16

  • alexis_masson1-76

    alexis_masson1-76

    Code qui ne marche pas, mais dans les faits marche ? nb : sorry pour le post avec juste 'yop', je suis habitué à Shift+Enter pour aller à la ligne... Mais la impossible de faire un retour à la ligne :( var result, longueur, i; result = document.querySelectorAll('li, p'); longueur = result.length; for(i=0; i<longueur; i++) { alert(result[i]); }

    le 16/08/2018 à 11h07

  • mram

    mram Administrateur

    Bonjour,

    Même remarque au niveau de l'accolade.

    PS : pour aller à la ligne, tapez deux fois sur entrée dans l'éditeur de texte.

    le 28/08/2018 à 22h12

  • philgd28

    philgd28

    Oui je sais sa énerve, mais je demande puisque l'on ne sait pas trop si c'est juste avec le bug. Enfin je teste avec Bracket. Merci

    le 17/08/2017 à 20h39

  • mram

    mram Administrateur

    Oui c'est pour ça que je suis là pour vérifier les codes utilisateurs :) Oui vous pouvez tester aussi sur le site codepen c'est pratique.

    le 17/08/2017 à 20h53

  • laila86

    laila86

    Bonjour je pense que mon code est bon mais jarriv pas a le valider c agacant

    le 31/12/2017 à 16h48

  • mram

    mram Administrateur

    Bonjour, oui votre code est bon mais on vérifie aussi que dans le sélecteur CSS il y ait un espace après la virgule.

    le 31/12/2017 à 19h23

  • pierrick.rosa-52

    pierrick.rosa-52

    bjr je ne comprends pas mon erreur...Merci par avance...

    le 08/08/2019 à 10h49

  • meriam

    meriam Administrateur

    Bonjour, vous avez déclaré la variable i avec le mot clé var deux fois (donc la ligne 3 est inutile). L'exercice demande de récupérer tous les li ( et non pas les p).

    le 08/08/2019 à 14h17

  • pierrick.rosa-52

    pierrick.rosa-52

    Merci Meriam!!!

    le 08/08/2019 à 20h46

  • nicolas.dsa.m-85

    nicolas.dsa.m-85

    trouvé, merci

    le 27/03/2019 à 14h04

  • nkeshimanabrice-37

    nkeshimanabrice-37

    Il y avais problemes espacement dans la var i

    le 15/04/2019 à 14h37

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;