I am currently working on implementing a slider feature that enables users to navigate through different pieces of information by clicking on arrows. However, I have encountered an issue where one arrow works correctly (forward), but the other arrow does not respond at all. Additionally, when attempting to click the left arrow multiple times, it triggers an uncaught TypeError and renders both arrows non-functional. Any guidance or advice would be greatly appreciated.
Below is the snippet of code in question:
const xhr = new XMLHttpRequest();
xhr.onload = function () {
const episodes = JSON.parse(this.responseText);
let i = 1
arrowRight.addEventListener('click', () => {
if (i < episodes.length) {
epiNum.innerHTML = `Episode ${episodes[i].episode}`
epiTitle.innerHTML = `${episodes[i].title}`;
epiDescription.innerHTML = `${episodes[i].description}`;
i++
console.log(i)
}
})
arrowLeft.addEventListener('click', () => {
if (i <= episodes.length) {
i--
epiNum.innerHTML = `Episode ${episodes[i].episode}`;
epiTitle.innerHTML = `${episodes[i].title}`;
epiDescription.innerHTML = `${episodes[i].description}`;
console.log(i)
}
})
}
xhr.open('GET', 'data/episodes.json', true);
xhr.setRequestHeader("content-type", "application/json");
xhr.send();