Unexpected behaviour of vanilla Javascript looping function to select divs and add/remove classes

Question

While trying to make a javascript slider on a web page I stumbled across a weird behavior of one of my scripts. Maybe someone of you can explain me why this has happened.

My HTML/JS to manipulate is:

 window.onload = function(){ var services = document.getElementsByClassName('services'); loop(0); function loop(i){ if (i == 0){ var previous = services.length - 1; } else { var previous = i - 1; } services[previous].classList.add('out-position'); services[previous].classList.remove('active'); services[i].classList.add('active'); setInterval(() => services[previous].classList.remove('out-position'), 1000); i == services.length - 1 ? i = 0 : i ++; setInterval(() => loop(i), 6000); } } 

 <div class="services"> <div> <h2>Title</h2> <p class="subheading">Some text</p> </div> <div> <img src="<?= imgURL ?>" /> <p class="description">Some random text for description</p> </div> </div> <div class="services"> <div> <h2>Title</h2> <p class="subheading">Some text</p> </div> <div> <img src="<?= imgURL ?>" /> <p class="description">Some random text for description</p> </div> </div> <div class="services"> <div> <h2>Title</h2> <p class="subheading">Some text</p> </div> <div> <img src="<?= imgURL ?>" /> <p class="description">Some random text for description</p> </div> </div> <div class="services"> <div> <h2>Title</h2> <p class="subheading">Some text</p> </div> <div> <img src="<?= imgURL ?>" /> <p class="description">Some random text for description</p> </div> </div> <div class="services"> <div> <h2>Title</h2> <p class="subheading">Some text</p> </div> <div> <img src="<?= imgURL ?>" /> <p class="description">Some random text for description</p> </div> </div> 

I had two classes to play with; active was the class that I had to use to show a div and out-position was the class that I had to use to make the div slide to the right. All the animations were defined in my CSS.

Everything seemed to work fine at first sight but after some iterations I noticed that my divs started to act in a weird way. Looking at my dev tools i could see that after a couple of iterations my script was selecting more divs than what I thought it should and after something like 15-20 iterations was literally going crazy, selecting all the divs on every iteration and randomly adding/removing classes to them.

I made my slider with pure CSS now, and is working fine, but I would really love to learn from my mistakes. So, can someone explain me what I was doing wrong in this script please?

Thanks!

Answer 1

This is the solution after @Pointy's comments, feel free to improve it, it can be usefull to implement a slider.

 window.onload = function(){ var services = document.getElementsByClassName('services'); loop(0); function loop(i){ if (i == 0){ var previous = services.length - 1; } else { var previous = i - 1; } services[previous].classList.add('out-position'); services[previous].classList.remove('active'); services[i].classList.add('active'); setTimeout(() => services[previous].classList.remove('out-position'), 1000); i == services.length - 1 ? i = 0 : i ++; setTimeout(() => loop(i), 3000); } } 

 .active { color: green; } .out-position { color: red; } 

 <div class="services"> <div> <h2>Title 1</h2> <p class="subheading">Some text 1</p> </div> <div> <p class="description">Some random text for description 1</p> </div> </div> <div class="services"> <div> <h2>Title 2</h2> <p class="subheading">Some text 2</p> </div> <div> <p class="description">Some random text for description 2</p> </div> </div> <div class="services"> <div> <h2>Title 3</h2> <p class="subheading">Some text 3</p> </div> <div> <p class="description">Some random text for description 3</p> </div> </div> <div class="services"> <div> <h2>Title 4</h2> <p class="subheading">Some text 4</p> </div> <div> <p class="description">Some random text for description 4</p> </div> </div> <div class="services"> <div> <h2>Title 5</h2> <p class="subheading">Some text 5</p> </div> <div> <p class="description">Some random text for description 5</p> </div> </div>