How to iterate through an array on each click of an event listener?-CodePudding

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.

CodePudding user response：

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>