Incrementing array index on button click javascript

Question

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]++)
})

ps4star · Accepted Answer · 2022-01-30 07:57:56Z

1

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])
})

edited Jan 30, 2022 at 7:57

answered Jan 30, 2022 at 7:53

ps4star

4083 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Noam Over a year ago

also semicolons are missing in the code

RobG Over a year ago

You might want to use ++currentIndex % codes.episodeCode.lengthso the index doesn't exceed the last index in the array. :-)

ps4star Over a year ago

@HannanShamoon Be sure to mark the answer as correct if it solved your problem.

Collectives™ on Stack Overflow

Incrementing array index on button click javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related