如何在每次单击事件侦听器时遍历数组？

Question

I'm new to JS and need help. I want to change an image and a paragraph dynamically with each click on an arrow. To do this, I have an array that contains the different values that this image and this paragraph must take on each click.

Here is my table:

const slides = [
    {
        "image":"slide1.jpg",
        "tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
    },
    {
        "image":"slide2.jpg",
        "tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
    },
    {
        "image":"slide3.jpg",
        "tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
    },
    {
        "image":"slide4.png",
        "tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
    }
]

The idea is: I want to create a function to loop through my array on each click with a loop.
click 1 = object 1 of the array. click 2 = object 2 of the array. click 3 = object 3 of the array. click 4 = return to object 0.

    let slide = 0
    let currentSlide = slides[slide]
    console.log(currentSlide)
    // Function to advance in the table slides on click
    function loopTableSlides() {
    slides.forEach(function(slide, index) {
        if ((slides.length - 1) == slide) {
            slide = 0 // to return to the first object in the array
            } else {
                slide = index + 1 // to move on to the next item each turn
            } 
        console.log(currentSlide)
    })
    }

    const arrowRight = document.querySelector('.arrow_right')
    arrowRight.addEventListener('click', function(e) {
    e.stopPropagation()
    console.log('arrow right click')
    activeBullet()
    loopTableSlides()
    })

I then want to create another function with a setAttribute and an innerHTML which will be called in my event listener and which will fetch the values of this famous loop.

Attached is the corresponding code with the first function I'm trying to check and the array in question. In the console, it returns 4 times the same object and always the same. Unfortunately I don't understand why...

Thanks for your help.

Answer 1

you can do something like this

 const slides = [ { "image":"slide1.jpg", "tagLine":"Impressions tous formats <span>en boutique et en ligne</span>" }, { "image":"slide2.jpg", "tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>" }, { "image":"slide3.jpg", "tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>" }, { "image":"slide4.png", "tagLine":"Autocollants <span>avec découpe laser sur mesure</span>" } ] const slide = document.getElementById('slide') const prev = document.getElementById('prev') const next = document.getElementById('next') let index = 0 const showSlide = n => { slide.innerHTML = slides[n].image } showSlide(index) next.addEventListener('click', () => { index = (index + 1) % slides.length showSlide(index) }) prev.addEventListener('click', () => { index = (index + slides.length - 1) % slides.length showSlide(index) })

 <div id="slide"></div> <button id="prev" >prev</button> <button id="next" >next</button>