système de notation étoiles : évènement sur previousElementSibling

Bonjour,
je fais encore appel à vos compétences, j'ai un système de notation avec des étoiles et une requête préparée qui fonctionne, j'ai du mal à construire la partie js et CSS et j'en suis au début. Je voudrais que quand on fait un mouseover sur une étoile les précédentes étoiles doivent aussi avoir la classe(ex. mousover sur la troisième étoile, la première deuxième et troisième deviennent rouges.
Mon code marche juste sur l'étoile que je pointe, pourtant j'ai essayé dans la console de remonter a l'élément parent de mon étoile puis aux enfants des éléments précédents du même niveau et il sélectionne bien le i précédent (le test je l'ai fais sans boucle avec star[3]...:

Code:

---

let previousStars = star.parentNode.previousElementSibling.childNodes;

---

Je pense que mon problème vient de la boucle while mais je trouve pas la solution :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

window.onload = () => {   //selectionner les etoiles const stars = document.querySelectorAll(".stars button i");     //on boucle sur les etoiles pour ajouter un ecouteur d'evenement for(let star of stars) { star.addEventListener('mouseover', function() { star.classList.add('hover'); //etoiles precedentes let previousStars = star.parentNode.previousElementSibling.childNodes; while(previousStars) { previousStars.classList.add('hover'); previousStars = previousStars.parentNode.previousElementSibling.childNodes } }); } }

---

mon formulaire :

Code:

---

1 2 3 4 5 6 7 8 9

<div class="stars"> <form action="" method="post"> <button name="btnValueNote" class="disabled" type="submit" value="1"><i class="bi bi-star"></i></button> <button name="btnValueNote" class="disabled" type="submit" value="2"><i class="bi bi-star"></i></button> <button name="btnValueNote" class="disabled" type="submit" value="3"><i class="bi bi-star"></i></button> <button name="btnValueNote" class="disabled" type="submit" value="4"><i class="bi bi-star"></i></button> <button name="btnValueNote" class="disabled" type="submit" value="5"><i class="bi bi-star"></i></button> </form> </div>

---

merci pour votre aide.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

const stars = document.querySelectorAll(".stars button i"); stars.forEach(star => { star.addEventListener('mouseover', hoverStar); star.addEventListener('mouseout', reset); });   function hoverStar() { for(let i=0; i< stars.length; ++i) { stars[i].classList.add('active'); if(stars[i]===this) { return; } } } function reset() { stars.forEach(star => { star.classList.remove('active'); }); }

---

je me demande s'il n'existe pas une solution plus elegante en css pur (avec :has() et le voisin direct par exemple)

Bonjour,
je vous remercie pour votre aide j'ai testé votre script il y a juste un petit souci que j'avais rencontré hier : dans la boucle for le classList.add ne fonctionne pas par contre si je fais un
style.color="red" tout marche

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

function hoverStar() { for(let i=0; i< stars.length; ++i) { stars[i].style.color="red"; if(stars[i]===this) { return; } } } function reset() { stars.forEach(star => { star.style.color="white"; }); }

---

Au lieu d'utiliser une classe celle ci peut être aussi la solution:D
Pour bien comprendre ce code, pourriez vous m'expliquer cette condition (hier j'avais essayé la boucle for mais sans condition

Code:

---

1 2 3

if(stars[i]===this) { return; }

---

merci beaucoup pour votre aide

stars[i].classList.add('active'); j'ai oublie de precise que j'avais utilise un autre nom de class
=> tu as utilise un classe "hover", alors que moi, je l'ai apelle "active" (pour eviter la confusion dans le css entre .hover & :hover)

Code:

---

1 2 3

if(stars[i]===this) { return; }

---

=> je boucle sur toutes les etoiles, mais on ne veux pas activer les etoiles "apres" celle qu'on survol... si on survol 3, on ne veut pas activer 4 ni 5 donc une fois qu'on arrive a l'etoile qu'on survol, j'arrete de boucler

Bonjour,
merci pour vos explications très claires, j'aurais du m'en apercevoir pour la class mais j'ai fais un copier coller du code:D.
je vous souhaite une bonne journée et encore merci