11521 sujets

JavaScript, DOM et API Web HTML5

Exécuter un JS sur toutes les classes d'une même page

Bonjour !

Grace à l'aide de certains d'entre vous, j'ai pu faire le script que je désirais. Cependant, étant encore débutante, je me heurte à un soucis de taille. Le script fonctionne bien mais uniquement sur la première classe. La classe revient souvent sur la page et le script n'était exécuté que sur la première.

Voici le codage en question en vue de faire des barres de progression sur un forum sans user de la balise <progress> https://codepen.io/Desferale/pen/gZvKEG qui fonctionne bien sur la première barre, mais pas sur la deuxième.

Merci à tous ceux qui prendront le temps de lire !
Modérateur
Bonjour,

Tu utilises document.querySelector qui ne retourne que le premier élément correspondant au sélecteur que tu mets en paramètre de la fonction.

Si tu veux faire une action sur tous les éléments correspondant à un sélecteur, il faut employer document.querySelectorAll qui retourne une liste d'éléments (sous forme de tableau) correspondant au sélecteur.

Ensuite, il faut faire une boucle qui va effectuer une action sur chaque élément de la liste.

Amicalement,
Merci !

Donc si j'ai bien compris, il me faut remplacer le document.querySelector en document.querySelectorAll.
Pour créer une boucle, la structure de base du script est utilisable ou il faut tout réécrire dans un optique différente ?
Modérateur
Bonjour,

Ton script est en grande partie réutilisable.

Par exemple (j'ai rajouté un "s" aux variables qui sont des tableaux, j'ai ajouté une boucle, et j'ai légèrement modifié la ligne qui change le style des span) :
var elemScores = document.querySelectorAll( '.progression' ),
    elemBarres = document.querySelectorAll( '.barre-progression span' ),
    sVal, k;
for (k=0; k<elemScores.length; k++)
{
  sVal = elemScores[k].textContent;
  elemBarres[k].style.width = sVal+'px';
}


Amicalement,
Meilleure solution
Merci beaucoup pour votre aide précieuse !
Cela marche parfaitement et je vais me plonger dans les boucles ahah
Sujet clos
Aller à