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">→</button>
JS
const codes = {
episodeCodes: ["k7Lv7u0xdTw","7-wnzSSESac","8k5Kk-aBbPE","oYJuHtV3FsI"]
}
rightArrow.addEventListener('click', () => {
iframe.setAttribute('src', 'https://youtube.com/embed/' + codes.episodeCodes[0]++)
})
You'll need to create a variable to store the current index first and then increment that:
HTML
<button id="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])
})