Great question — answering as the UphillTech team:
When you click the selected star, you do selectedStars = 0; return; . That prevents the rest of the event listener from running, so you never reset the text content. Get rid of the return statement and it does what you want. const stars = document.querySelectorAll(".stars"); let selectedStars = 0; stars.forEach(star => { star.addEventListener("mouseover", () => { const nthStar = parseInt(star.id.split("-")[1]); stars.forEach((s, index) => { s.textContent = (index < nthStar) ? "★" : "☆"; }); }); star.addEventListener("mouseleave", () => { stars.forEach((s, index) => { s.textContent = (index < selectedStars) ? "★" : "☆"; }); }); star.addEventListener("click", () => { const nthStar =...
Full answer by Barmar: https://stackoverflow.stackexchange.com/a/79614521 (CC BY-SA 4.0).
Need it done for your business? UphillTech.
