Bonjour à tous,

j'essaie désespérement d'ajouter une classe à un élément html d'une page au chargement du body mais je bute et n'y arrive pas...
Je fais appel à vos lumières pour m'aider.
Voici un lien vers un petit CodePen "test" : https://codepen.io/ZeSpecialK/pen/NWpoaaN

Merci d'avance à tous ceux qui voudront bien prendre 5 min. pour m'aiguiller un peu !

Bonjour,

J'ai tout essayé et je n'y arrive pas non plus, rien a y faire il ne veut pas ajouter de class à un 'a'.

Cependant j'ai trouvé une solutions qui consiste à mettre un id sur le a puis à l'appeler dans le javascript.

<div id="class1">
  <a href="#" id="test" class="">Hello</a>   
</div>

#class1 { font-size: 30px; background-color: green; }
.class2 { border-bottom: black 30px solid; }

window.onload = function(){
document.getElementById('test').classList.add("class2");
}

Bonjour,

getElementsByTagName renvoie une HTMLCollection, il faut donc soit boucler dessus, soit prendre le premier résultat. Par exemple :

document.getElementById("class1").getElementsByTagName("a")[0].classList.add("class2");

Par contre, est-ce que ça n'est pas plus simple d'ajouter la classe dans le HMTL directement ?

(à noter aussi que le CSS est invalide : tu voulais dire "30px", non ?)

Lamecarlate a écrit:

Bonjour,

getElementsByTagName renvoie une HTMLCollection, il faut donc soit boucler dessus, soit prendre le premier résultat. Par exemple :

document.getElementById("class1").getElementsByTagName("a")[0].classList.add("class2");

Par contre, est-ce que ça n'est pas plus simple d'ajouter la classe dans le HMTL directement ?

(à noter aussi que le CSS est invalide : tu voulais dire "30px", non ?)

Merci pour ton aide,
oui effectivement il s'agit bien de 30px ;-)
Si je comprends bien, l'élément entre crochets [0] signifie 1er élément de la collection.
Est il possible dans ce cas de définir une plage s'il y a plusieurs éléments à cibler (du genre [0-3]) ?
Désolé pour les questions de noob, je suis une bille en JS.

Non, pas possible d'avoir une plage comme ça, il faudrait boucler.

Je te propose de réécrire un peu aussi.

Par exemple :

window.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll("#class1 a").forEach(function (element, index) {
    if (index < 3) {
      element.classList.add('class2');
    }
  });
});

• addEventListener('DOMContentLoaded') remplace onload, et te permet de rajouter toutes les fonctions que tu veux au chargement sans écraser les précédentes (comme le ferait onload).
• querySelectorAll te permet de mettre un sélecteur, comme tu ferais en CSS (perso je n'utilise jamais que cette méthode, c'est beaucoup plus générique - j'aime bien aussi querySelector, qui renvoie seulement le premier élément qui correspond, pratique si je sais que je n'en ai qu'un, ça évite justement de boucler)
• forEach boucle sur le résultat et lance une fonction anonyme avec deux arguments : l'élément en cours et sa position (ça commence à 0)
• et là, on dit "si l'index est inférieur à 3, on donne la classe 'classe2'"

Si un truc n'est pas clair, demande

Lamecarlate a écrit:

Non, pas possible d'avoir une plage comme ça, il faudrait boucler.

Je te propose de réécrire un peu aussi.

Par exemple :

window.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll("#class1 a").forEach(function (element, index) {
    if (index < 3) {
      element.classList.add('class2');
    }
  });
});

• addEventListener('DOMContentLoaded') remplace onload, et te permet de rajouter toutes les fonctions que tu veux au chargement sans écraser les précédentes (comme le ferait onload).
• querySelectorAll te permet de mettre un sélecteur, comme tu ferais en CSS (perso je n'utilise jamais que cette méthode, c'est beaucoup plus générique - j'aime bien aussi querySelector, qui renvoie seulement le premier élément qui correspond, pratique si je sais que je n'en ai qu'un, ça évite justement de boucler)
• forEach boucle sur le résultat et lance une fonction anonyme avec deux arguments : l'élément en cours et sa position (ça commence à 0)
• et là, on dit "si l'index est inférieur à 3, on donne la classe 'classe2'"

Si un truc n'est pas clair, demande


Un énorme merci pour ton aide ! Je teste ça et je te tiens informé. Ça me semble très clair et très didactique.
Il faut vraiment que je m'y mette.... OpenClassroom est-il une site valable pour apprendre en autodidacte à programmer en JS ?

Moi j'ai appris sur "le site du zéro", qui est si l'on peut dire l'ancêtre d'openclassrooms. Avec d'assez bons résultats. J'ai parcouru rapidement le cours actuel https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript et il me semble assez clair, et donne déjà de bases.