JavaScript：将 for 循环与单击处理程序事件结合使用。 循环跳到最后一项

Question

I'm learning JavaScript and am trying to use a create a picture carousel. I have a button attached to a click handler event and a for loop to insert an image into an empty HTML IMG element. The images and alt values are sorted in an object containing an image and alt array. Instead of moving one image at a time with each click, it skips straight to the last item? can anyone 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]);
         
    }
    for ( let i = 0; i < images.alt.length; i++ ) {
        image.setAttribute("alt", images.alt[i]); 
    }
});

Answer 1

OK, brother.

I think that is because you are new to program?

The function you add on click event is not running as expected, because it actually sets image attribute from 0, 1, ..., images.length - 1 but not change one by one when you click.

So, what you really need to do is that correct the function on 'click' event and make it changes one by one as you click.

I think closure will help you, or you can simply use a global variable to record the current image index.