Hi,
It is basically a slider that works except the fact it keeps running whereas the user has clicked on a dot.
I would like to understand why my clearInterval does not work in this following piece of code. Thank you very much for any ideas.
let myBigFunction = (isDotClicked) {
let x; //Initialize my var for the interval
// Function sliderArticles that will be called every 3000s
let sliderArticles = () => {
newDiv.innerHTML = markupSlidersArticle[indice];
displayAnimationBody.dotStyle(indice);
locations.parent.insertBefore(newDiv, locations.sibiling);
indice++
if (indice >= markupSlidersArticle.length) {
indice = 0;
}
}
//My logic
if (isDotClicked >= 0) {
console.log("fired") // It does fire when users click an element(dot)
let child = document.getElementsByClassName("section_contenant")[0];
child.innerHTML = markupSlidersArticle[indice];
displayAnimationBody.dotStyle(indice);
clearInterval(x) // It does not do my expectation.
x = 0; // to make sure to cancel the interval
return;
} else {
sliderArticles();
x = setInterval(sliderArticles, 3000) // set my interval
}
}
}