Quote:
... whenever the user clicks the "next" button 3 times (the number of the iframes that availble in the HTML) when the cycle is finished, everything disappears ...
Because you keep incrementing the
currentlySelected
variable, without checking whether you've gone past the end of the array.
nextBtn.addEventListener("click", function() {
map[currentlySelected].classList.remove("active");
currentlySelected++;
if (currentlySelected >= map.length) { currentlySelected = 0; }
map[currentlySelected].classList.add("active");
});
You'll probably have the same problem with the
prevBtn
handler:
prevBtn.addEventListener("click", function() {
map[currentlySelected].classList.remove("active");
currentlySelected--;
if (currentlySelected < 0) { currentlySelected = map.length - 1; }
map[currentlySelected].classList.add("active");
});
Quote:
Now, I want the "prev" button to be enabled whenever there is an iframe to go back to
Simple enough:
const updateNavButtons = function(){
prevBtn.disabled = currentlySelected === 0;
nextBtn.disabled = currentlySelected === map.length - 1;
};
nextBtn.addEventListener("click", function() {
map[currentlySelected].classList.remove("active");
currentlySelected++;
if (currentlySelected >= map.length) { currentlySelected = 0; }
map[currentlySelected].classList.add("active");
updateNavButtons();
});
prevBtn.addEventListener("click", function() {
map[currentlySelected].classList.remove("active");
currentlySelected--;
if (currentlySelected < 0) { currentlySelected = map.length - 1; }
map[currentlySelected].classList.add("active");
updateNavButtons();
});