let controls = document.querySelectorAll('.exhibition'); for(let control of controls){ let part = control.querySelectorAll('.cards'), partLength = part.length; console.log("partLength",partLength); let partArray = [].slice.call(part); let indexicon = control.querySelectorAll('.index div'); let currentIndex = 0; control.addEventListener("click",function(e){ let target = e.target; if(target.classList.contains("next")){ let currentPart = partArray[currentIndex], nextPart = partArray[(currentIndex+1)%partLength], currentIndexIcon = indexicon[currentIndex], nextIndexIcon = indexicon[(currentIndex+1)%partLength]; currentPart.classList.add("disappear"); nextPart.classList.remove("disappear"); currentIndexIcon.classList.remove("index_on"); nextIndexIcon.classList.add("index_on"); currentIndex = (currentIndex+1)%partLength; console.log("next",currentIndex); } }); }