JavaScript carousel using array and for-loop: Why does slideIndex get "stuck" after first loop?

Question

I'm trying to create a javascript carousel of scrolling images without jQuery, using an array and a for-loop.

At the end of the 4-object array of images, the "next button" returns to array[slideIndex=0].

Similarly, when you hit the "previous button" on the first object in the array, it returns the last object in the array.

This function seems to almost work with the code I have right now. However, it only works once. After skipping backwards or forwards to the last or first object in the array, it doesn't continue to scroll in the intended direction.

Can you please tell me why the slideIndex doesn't continue to loop with the plusDivs() function after the first skip?

let slides_array = document.getElementsByClassName("mySlides"); 

  let slideIndex = 0; 
  showDivs(slideIndex);
  
  function plusDivs(n) {
    slideIndex += n; 
    showDivs(slideIndex); 
  }
  
  function showDivs(slideIndex) { 
    let i; 
    
    if (slideIndex > (slides_array.length - 1)) { 
      slideIndex = 0; 
    }; 
    
    if (slideIndex < 0) { 
      slideIndex = (slides_array.length - 1); 
    }; 
    
    for (i=0; i<(slides_array.length); i++) { 
      slides_array[i].style.display = "none"; 
    } 
      
    slides_array[slideIndex].style.display = "block"; 
  }

<section class = "Slideshow">
  <div id="slide1" class="mySlides">
    <img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg">
  </div>

  <div id="slide2" class="mySlides">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Shake-shiver-and-tremble-Why-dogs-do-it.jpg?itok=yvOUgQeL">
  </div>

  <div id="slide3" class="mySlides">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--kx3d-Wgg--/c_scale,fl_progressive,q_80,w_800/ol9ceoqxidudap8owlwn.jpg">
  </div>

  <div id="slide4" class="mySlides">
    <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/korean-jindo-dog-breed-pictures/puppy-1_680-453.jpg">
  </div>
</section>

<!-- Slideshow Buttons -->
<button class="button" onclick="plusDivs(-1)"> &#10094; </button>

<button class="button" onclick="plusDivs(+1)"> &#10095; </button>

Pardon (and please correct) me if I'm not using the correct technical terms -- I'm trying to describe my current issue as best as I can, but maybe this isn't the best way to describe the problem. Please advise.

Answer 1

The scope problem mentioned by Duj and Trincot is the key problem here. Moving the reset of slideIndex out of showDivs solves that.

A way of creating more self explanatory code is to change plusDivs into two functions, one which increments (plusDivs), and one which decrements (minusDivs). You can then update slideIndex from within those. (These two functions use ternary operators to update slideIndex, which are pretty cool, and simple to implement).

let slides_array = document.getElementsByClassName("mySlides");

let slideIndex = 0;
showDivs(slideIndex);

function plusDivs() {
  slideIndex = slideIndex === slides_array.length - 1 ? 0 : slideIndex + 1;
  showDivs(slideIndex);
}

function minusDivs() {
  slideIndex = slideIndex === 0 ? slides_array.length - 1 : slideIndex - 1;
  showDivs(slideIndex);
}

function showDivs(slideIndex) {
  for (i = 0; i < slides_array.length; i++) {
    slides_array[i].style.display = "none";
  }
  slides_array[slideIndex].style.display = "block";
}

You can then update the HTML like this:

<!-- Slideshow Buttons -->
<button class="button" onclick="minusDivs()"> &#10094; </button>
<button class="button" onclick="plusDivs()"> &#10095; </button>

Answer 2

As you have a global variable slideIndex, you should not pass it as a function argument, as that creates a local variable with the same name, but any reassignment to it will not affect the global variable.

let slides_array = document.getElementsByClassName("mySlides"); 

  let slideIndex = 0; 
  showDivs(slideIndex);
  
  function plusDivs(n) {
    slideIndex += n; 
    showDivs(); /// <---- 
  }
  
  function showDivs() { /// <---- 
    let i; 
    
    if (slideIndex > (slides_array.length - 1)) { 
      slideIndex = 0; 
    }; 
    
    if (slideIndex < 0) { 
      slideIndex = (slides_array.length - 1); 
    }; 
    
    for (i=0; i<(slides_array.length); i++) { 
      slides_array[i].style.display = "none"; 
    } 
      
    slides_array[slideIndex].style.display = "block"; 
  }

<section class = "Slideshow">
  <div id="slide1" class="mySlides">
    <img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg">
  </div>

  <div id="slide2" class="mySlides">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Shake-shiver-and-tremble-Why-dogs-do-it.jpg?itok=yvOUgQeL">
  </div>

  <div id="slide3" class="mySlides">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--kx3d-Wgg--/c_scale,fl_progressive,q_80,w_800/ol9ceoqxidudap8owlwn.jpg">
  </div>

  <div id="slide4" class="mySlides">
    <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/korean-jindo-dog-breed-pictures/puppy-1_680-453.jpg">
  </div>
</section>

<!-- Slideshow Buttons -->
<button class="button" onclick="plusDivs(-1)"> &#10094; </button>

<button class="button" onclick="plusDivs(+1)"> &#10095; </button>

Alternatively, you could pass it as argument, but then make sure you do the modification to the global variable (outside of the function to which you pass the argument).