Running through Array & adding/removing classes

Question

Currently, I have to rebuild some pages to replace jQuery with vanilla JavaScript. In my case, I have a div wrapped around some images. The first image has a css-modifier (-active) and in JavaScript, I want a loop which deletes the modifier and gives it to the next image. In the end, the modifier should be placed on the first image again. This function should also run every second.

The html looks like this:

(function () {
    var container = document.getElementsByClassName('m-weatherMap__image');
    container = Array.from(container);

    timedLoop();

    function timedLoop () {
        var i = 0;
        setTimeout(function () {
            i++;

            timedLoop();
            if (i < container.length) {
                if (!container[i].classList.contains('-active')) {
                    setTimeout(fadeout, 300);
                    function fadeout () {
                        container[i - 1].classList.remove('-active');
                        container[i - 1].style.opacity = '0';
                    }
                    container[i].classList.add('-active');
                }
            }
        }, 1000);
    }
})();

<div class="m-weatherMap">
  <img class="m-weatherMap__image -active" src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
</div>

Now I want a loop which goes through the array and checks if the element has the modifier. If it does, it deletes it and gives it to the next element. At the moment, the class will be added to the second image but not further (yesterday it worked until the end of the array, not sure what I changed) but there it went to the end of the array and stopped there.

Does someone have an idea?

You're setting i = 0 every time timedLoop() is called. Instead of using setTimeout() why not use setInterval() that way you don't have to keep calling timedLoop() — Giovani Vercauteren
– Giovani Vercauteren, Commented Nov 6, 2019 at 8:25

Ashkan Pourghasem · Accepted Answer · 2019-11-06 09:01:55Z

I think this wouldn't be a bad solution:

(function () {

    var container = document.getElementsByClassName('m-weatherMap__image');
    var counter = 0
    container = Array.from(container);
    setInterval(function() {
      if (counter === container.length - 1) {
        container[counter].classList.remove('-active');
        container[0].classList.add('-active');
        counter = 0;
        return;
      }
      
      if (counter <= container.length - 2) {
        container[counter].classList.remove('-active');
        container[counter+1].classList.add('-active');
      }
      
      counter++;
    }, 1000);
})();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>.-active{transform: rotate(180deg);}img{width:50px;box-sizing:border-box;}</style>
<body>
<div class="m-weatherMap">
  <img class="m-weatherMap__image -active" src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
</div>
</body>
</html>

Why "counter <= container.length - 2" ? The first if-statement is for enabling the loop to repeat after the array is fully looped right? With "counter <= container.length - 1" it also works.

Collectives™ on Stack Overflow

Running through Array & adding/removing classes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related