JavaScript click event. Loop always skips to last item.

Question

Hi,
Trying to build a JavaScript image carousel. I have an object which contains two arrays. One for images one for alt description. 
I have a back and a next button to control which image is displayed and a blank image element to insert a src and alt attribute into.
I have set up a click handler event with a for loop to loop through all the images in the array. But it skips from the first straight to the last? Can any one help me with where I'm going wrong?
const images = {  
   image: ["images/alice.jpg", "images/basketball.JPG", "images/butterfly.JPG", "images/colour.JPG", "images/david.JPG", "images/dope.JPG", "images/fire.JPG", "images/friday.JPG", "images/link.jpg", "images/lion.jpg", "images/rose.JPG", "images/skull.JPG"  ],
    alt: ["alice in wonderland", "basketball", "bufferfly and skull", "colour", "david attenbourgh", "dope", "fire", "friday the 13th", "link", "lion", "rose", "skull"]
};
const back = document.getElementById("back");
const next = document.getElementById("next");
const image = document.getElementById("image");
image.setAttribute("src", images.image[0]);
image.setAttribute("alt", images.alt[0]);
next.addEventListener("click", () => {
   for ( let i = 0; i < images.image.length; i++ ) {
        image.setAttribute("src", images.image[i]);
        image.setAttribute("alt", images.alt[i]);   
    }
});

Bramyn Payne · Answer

Hey Chris,
I think that your code is updating it for whatever the length of your array is, and it returns the last image because that is the last thing returned from your for-loop.
I don't know if a for-loop is the best solution here... The way I would handle is to have a page number tracker and then increment that by 1 whenever the button is clicked.
```
let pageNumber = 1;
image.setAttribute("src", images.image[pageNumber - 1]); image.setAttribute("alt", images.alt[pageNumber - 1]);
next.addEventListener("click", () => {
pageNumber++;
image.setAttribute("src", images.image[pageNumber - 1]); image.setAttribute("alt", images.alt[pageNumber - 1]);
});
```
This is the type of solution I would try to implement.  Just by add/replace this in your existing code.  You would be able to do something similar for a back button.
I hope this helps!!

Welcome to the Treehouse Community

Looking to learn something new?

Chris Roper

Chris Roper

JavaScript click event. Loop always skips to last item.

1 Answer

Bramyn Payne

Bramyn Payne

Chris Roper

Chris Roper