¡hola a todos!

tengo un mapa con puntos MAP que cada 3 segundos muestra un bloque con info

una función que ya está en progreso, y quiero que la función se detenga al hacer clic en un punto y me muestre un bloque de información (y lo hice).

lo siento de antemano a continuación es mi código

 // map with dots var isActive = 0; var isLoading = 1; const count = document.querySelectorAll("[data-id]");//circle svg around dot function removeClass() { let infoCards = document.querySelectorAll("[data-info-id]");// info page name of the project infoCards.forEach((el) => { el.classList.remove("show"); }); } function removeCircle() { count.forEach((el) => { el.style.display = "none"; }); } function ready() { function setAround(percent, idx) { removeCircle(); let beforeElemIdx = idx === 0 ? count.length - 1 : idx - 1; let beforeElem = document.querySelector( '[data-id="' + beforeElemIdx + '"]' ); let elem = document.querySelector('[data-id="' + idx + '"]'); elem.style.display = "block"; elem.classList.remove('active-circle'); beforeElem.style.display = "block"; const math = 2 * Math.PI * elem.r.baseVal.value; elem.style.strokeDasharray = `${math} 1000`; let a = math * (1 - percent / 100); elem.style.strokeDashoffset = a; if (percent >= 99.5) { removeClass(); let infoShow = document.querySelector(`[data-info-id="${idx}"]`); infoShow.classList.add("show"); isLoading++; if (isLoading === count.length) { isLoading = 0; } } } requestAnimationFrame(draw); function draw(t) { let idx = isLoading; requestAnimationFrame(draw); setAround((t / 30) % 100, idx);//timer 3sec } } document.addEventListener("DOMContentLoaded", ready);

y yo hice esto

 var dots = document.querySelectorAll(".dota"); var infoCards = document.querySelectorAll("[data-info-id]"); let circle = document.querySelectorAll('[data-id]'); dots.forEach((el) => { el.addEventListener('click', () => { let idx = el.dataset.dota; let circle = el.dataset.dota; showInfo(idx); addCircle(idx); }); }); function showInfo(idx) { removeClass(); let elem = document.querySelector(`[data-info-id='${idx}']`); elem.classList.add('show'); } function addCircle(idx) { let circle = document.querySelector(`[data-id='${idx}']`); circle.classList.add('active-circle'); }

y si quieres mi sitio, por favor envíame un mensaje privado, te enviaré mi página de github

CÓDIGO PUG

¡GRACIAS A TODOS!