How to loop through icons with Javascript and toggle class?

Question

Just trying to loop through the icons and toggle class with Javascript,i tried but something is not working so let me know what is wrong with it.

const stars = document.getElementsByClassName('stars');

stars.addEventListener('click', checked);

function checked() {
    for (let i = 0; i < stars.length; i++) {
        stars.classList.toggle("far");
        stars.classList.toggle("fas");
    }
}

<div class="star-ratings">
                <input type="radio" name="star-one" >
                <label for="star-one"><i class="far fa-star" class="stars" aria-hidden="true" ></i></label>
                <input type="radio" name="star-two" >
                <label for="star-two"><i class="far fa-star " class="stars" aria-hidden="true"></i></label>
                <input type="radio" name="star-three" id="star-three">
                <label for="star-three"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
                <input type="radio" name="star-four" id="star-four">
                <label for="star-four"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
                <input type="radio" name="star-five" id="star-five">
                <label for="star-five"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
              </div>

If you run your script here above you will see an error. That error occurs because you try to use `addEventListener` on an `HTMLCollection` object. — Emiel Zuurbier, Jul 11 '21 at 14:19
Your problem is that you added the "class" attribute twice. The 2nd class attribute (which has the stars class) is ignored and your "stars" collection is empty. Try to add the class "stars" to the first class attribute separated by space. Also, you have to loop through the returned list (stars) and add the event listeners seperately. — Yoni Ziv, Jul 11 '21 at 14:21

score 1 · Answer 1 · answered Jul 11 '21 at 14:18

It's not very clear what you're trying to achieve here. But if all you're trying to do is untoggle the other options when changing the option then you do not need JavaScript for it.

the simple solution is to set a name attribute with a common name for all the radio buttons you want to group together.

<html lang="en">

<body>
    <div class="star-ratings">
        <input type="radio" name="star-one">
        <label for="star-one"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
        <input type="radio" name="star-one">
        <label for="star-two"><i class="far fa-star " class="stars" aria-hidden="true"></i></label>
        <input type="radio" name="star-one" id="star-three">
        <label for="star-three"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
        <input type="radio" name="star-one" id="star-four">
        <label for="star-four"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
        <input type="radio" name="star-one" id="star-five">
        <label for="star-five"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
    </div>
</body>

</html>

How to loop through icons with Javascript and toggle class?

1 Answers1