Incrementing array index on button click javascript

I was creating a website where you can watch an episode of a tv series. I got all the YouTube codes and stored them in an array. I want it to change the index of the array whenever I click the ‘Next episode’ button. I know I can add alot of eventListeners but that lagged my website. Please help me on this

Code –

HTML

<button id="rightArrow">&rightarrow;</button>

JS

const codes = {
    episodeCodes: ["k7Lv7u0xdTw","7-wnzSSESac","8k5Kk-aBbPE","oYJuHtV3FsI"]
}

rightArrow.addEventListener('click', () => {  
    iframe.setAttribute('src', 'https://youtube.com/embed/' + codes.episodeCodes[0]++)
})

Answer

You’ll need to create a variable to store the current index first and then increment that:

HTML

<button id="rightArrow">&rightarrow;</button>

JS

let currentIndex = 0

const codes = {
    episodeCodes: ["k7Lv7u0xdTw","7-wnzSSESac","8k5Kk-aBbPE","oYJuHtV3FsI"]
}

rightArrow.addEventListener('click', () => {  
    iframe.setAttribute('src', 'https://youtube.com/embed/' + codes.episodeCodes[++currentIndex % codes.episodeCode.length])
})