I am trying to make a slider. Most of it is working till here, but I am not getting further as I want to find the index of the item which I removed the class as last from.(before the click)
So when I click on a dot, the clicked dot must be enabled and get the active class and the class on the previous active dot needs to be removed.
navDots.addEventListener('click', e => {
// make only dot's clickable
const targetDot = e.target.closest('.dots');
// disable NavDots for clicks
if(!targetDot)return;
//Find the index of the clicked btn
const dotIndex = Array.from(targetDot.parentNode.children).indexOf(targetDot);
console.log(dotIndex);
// Add the active class tot the dot
navDots.children[dotIndex].classList.add('active');
//HOW TO REMOVE PREVIOUS DOT ACTIVE style?
//show image with dotIndex
showImages(dotIndex);
});
Thank you for helping,
r,y.
The most efficient way is to store active element in a variable:
let activeElement = null;
navDots.addEventListener('click', e => {
// make only dot's clickable
const targetDot = e.target.closest('.dots');
// disable NavDots for clicks
if(!targetDot)return;
//Find the index of the clicked btn
const dotIndex = Array.from(targetDot.parentNode.children).indexOf(targetDot);
console.log(dotIndex);
// remove previous active class
activeElement && activeElement.classList.remove("active");
// save new active element
activeElement = navDots.children[dotIndex];
// Add the active class tot the dot
activeElement.classList.add('active');
//HOW TO REMOVE PREVIOUS DOT ACTIVE style?
//show image with dotIndex
showImages(dotIndex);
});