Bonjour,

J'ai été confronté à certains problèmes dans l'exercice du premier chapitre du cours "Écrivez du Javascript pour le web".

Cette exercice a l'apparence anodin puisqu'il s'agit d'utiliser les méthodes vus dans le chapitre pour sélectionner des éléments DOM.

Cependant, deux problèmes ont mis ma patience à rude épreuve:

- Le fichier scripte est appelé en début du document html, les recherches d'éléments retournaient donc systématiquement "null".

Faire appel au scripte en fin de page html a résolut le problème mais j'ai perdu près d'une heure à comprendre pourquoi même la plus simple sélection DOM ne fonctionnait pas.

- L'énoncé 4 de l'exercice demande:

"Récupérez les éléments de type li qui sont dans un paragraphe (p) ayant la classe important. Les paragraphes doivent eux-même être dans un article (article)."
L'imbrication dans le html est le suivant <article><p class=["important"]><ul><li></li><li></li></ul></p></article>.

li étant dans p j'ai d'abord pensé a utiliser "querySelectorAll" avec ce sélecteur css : "article p[class="important] li".

La correction propose "article p.important ul li".

Mais ça ne fonctionne pas car le navigateur considère que ul n'est pas dans p mais après.

ainsi j'ai fini par utiliser "article p[class="important"]+ul li" qui lui fonctionne.
"article p.important+ul li"aurai fonctionné aussi.

J'ai aussi passé beaucoup de temps pour comprendre ce bug.

Voila, sauf erreurs de ma part; je pense qu'il faudrait modifier cette exercice afin que les prochains étudiants ne soient pas confrontés à ces problèmes peux intuitifs. (j'ai failli balancer mon pc par la fenêtre ).

-
Edité par jesuisunepomme 20 mars 2020 à 16:37:27

Sérieux, merci. 

Parfois j'ai l'impression que les profs oublient qu'ils ont à faire à des débutants.

Au moins, on apprend la débrouille 

Je suis dans le même cas que toi. Je pête un plomb avec ce cours. Déjà les exos CodePen ont l'air bancales, et en plus le cours est pas hyper bien expliqué...

Bonjour,

Moi, je galère aussi et j'ai eu le même problème avec l'édieur codePen sur le cours Programmez en JS

Sur l'exercice 1 question 1 (je ne suis vraiment prête d'avoir fini si ça bug comme ça), j'ai tapé

const mainContent = document.GetElementById ('main-content');

j'ai repris la formule du cours et rien ne se passe, même en dépalçant le script en bas de page

A quoi doivent ressembler les réponses de ces exercices ?

Là c'est juste une recherche par Id, ça ne "fait" rien dans ta console.

Par contre, tu peux faire un console.log pour voir que ta recherche fonctionne bien.

Merci d'avoir partagés vos galères, cela m'a aidé a trouvé facilement !

Je ne comprends vraiment pas le but concret du code qui nous est demandé ici...

Est-ce que les éléments qu'on récupère avec le code sont censés rester les seuls affichés ? Je dirais que non...

Rien n'est dit en ce sens, on nous demande juste de les récupérer. Auquel cas comment vérifier ?

Ci-joint mon code, si une erreur vous saute aux yeux.

const mainContent = document.getElementById('main-content');
const important = document.getElementsByClassName('important');
const article = document.getElementsByTagName('article');
const quatre = document.querySelectorAll('li');
const premierLi = quatre[0]
const secondLi = premierLi.nextElementSibling;
const mainContent2 = document.getElementById('main-content');

A voir si je ne peux pas passer "premierLi.nextElementSibling" directement en "quatre[0].nextElementSibling"...

Seb_Seb a écrit:

Je ne comprends vraiment pas le but concret du code qui nous est demandé ici...

Est-ce que les éléments qu'on récupère avec le code sont censés rester les seuls affichés ? Je dirais que non...

Rien n'est dit en ce sens, on nous demande juste de les récupérer. Auquel cas comment vérifier ?

Ci-joint mon code, si une erreur vous saute aux yeux.

const mainContent = document.getElementById('main-content');
const important = document.getElementsByClassName('important');
const article = document.getElementsByTagName('article');
const quatre = document.querySelectorAll('li');
const premierLi = quatre[0]
const secondLi = premierLi.nextElementSibling;
const mainContent2 = document.getElementById('main-content');

A voir si je ne peux pas passer "premierLi.nextElementSibling" directement en "quatre[0].nextElementSibling"...

où même en "quatre[1]" 

Comme dit plus haut tu peux utiliser console.log(variable) et donc afficher le contenu de cette variable dans ta console. Tu peux trouver l'onglet console sur CodePen

-
Edité par VictorCL 31 mars 2020 à 9:24:29

@SamuelGaborieau3 : cela faisait partie de l'exercice de récupérer le premier élément puis au suivant depuis lui.

@VictorCL : tellement bien cachée la console que je ne l'ai pas vue hier, heureusement que ton message m'y a à nouveau fait jeter un oeil.

Merci à vous deux pour votre aide

vous pouvez trouvez des ressources / cours / tutoriels sur javascript en dehors de Openclassrooms la documentation de MDN propose aussi des tutoriel / guide en plus de ça documentation Guide Javascript MDN en français et automatiquement mis à jour ,

un autre site francophone propose des cours / tuto en format vidéo sur différentes techno du web dont Javascript Grafikart Javascript

avec des mots clès comme: Javascript cours tuto guide

l'on peut trouvé tout un tas de ressources , si parfois une partie d'un cours sur openclassrooms et un peut flou n'hésitez pas à cherchez ailleurs , pour complétez la notion à apprendre.

-
Edité par SamuelGaborieau3 31 mars 2020 à 12:27:09