How get slideIndex back to slideIndex

Question

I am trying to understand why this code isn't going back to slideIndex = 0;

Can someone please explain, at the forth click I am getting undefined instead of jumping back to the first index of the slide?

Thank you for explaining.

slideIndex = 0;

    function nextSlide() {

        console.log(slides[slideIndex]);   
               

       slideIndex++;

       if(slideIndex > slides.length){
        slideIndex = 0;
        }
      
    }

---

Actually this the whole code, so I am trying to understand why the slideIndex is not jumping back to slideIndex=0; One the slideIndex > myArray.length; it needs to jump back to the initializes slideIndex, but I am getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'style') at HTMLButtonElement.

Please help:

slideIndex=0;

const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");

let myArray = document.querySelectorAll("img");
let i = 0;


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


  nextbtn.addEventListener("click", function(){

    myArray[slideIndex+1].style.display="block";
    
   slideIndex++;

   if(slideIndex >= myArray.length-1){
    console.log("yes");
slideIndex=0;
}
});

prevbtn.addEventListener("click", function(){
});

Answer 1

(this answer refers to code supplied by the author within another answer)

the problem is this line: myArray[slideIndex+1].style.display="block";

let's say there are 9 items in myArray and slideIndex is 8. then the above tries to set the style on myArray[9] which does not exist.

you can fix this by either moving the style change to after you've adjusted and validated the slideIndex (in your next two lines), or you can use a modulus adjustment such as this: myArray[(slideIndex+1)%myArray.length].style.display="block";

Answer 2

This is working, but I am not sure if this a good written code, except that I can simplify the code.

let slideIndex=0;

const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");

let myArray = document.querySelectorAll("img");
let i = 0;

for (i = 0; i < myArray.length; i++) {
    myArray[i].style.display = "none";
    }

myArray[slideIndex].style.display = "block";

nextbtn.addEventListener("click", function(){

    if(slideIndex == 0){
        slideIndex = slideIndex + 1;
    }

    if(slideIndex > myArray.length-1){
        slideIndex = 0;
        for (i = 0; i < myArray.length; i++) {
                 myArray[i].style.display = "none";
                }

        myArray[slideIndex].style.display = "block"; 

    }

    if(slideIndex<myArray.length){
        
       myArray[slideIndex].style.display = "block";
       console.log(slideIndex);
    }
        slideIndex++; 
});

prevbtn.addEventListener("click", function(){
});

Answer 3

Thank you for answering, but I am using this: myArray[slideIndex+1].style.display="block"; for jumping by first click to next image otherwise you have to click twice before going to next image.

I have now this code which seems to work except that I have to click twice when page load to get the next image. How can that be fixed?

let slideIndex=0;

const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");

let myArray = document.querySelectorAll("img");
let i = 0;

for (i = 0; i < myArray.length; i++) {
    myArray[i].style.display = "none";
}

myArray[slideIndex].style.display = "block";

nextbtn.addEventListener("click", function(){

    if(slideIndex > myArray.length-1){
        slideIndex = 0;
        for (i = 0; i < myArray.length; i++) {
             myArray[i].style.display = "none";
        }

        myArray[slideIndex].style.display = "block";       
    }

    myArray[slideIndex].style.display = "block";
    console.log(slideIndex);

    slideIndex++; 

});

prevbtn.addEventListener("click", function(){
});