Este querySelectorAll no funciona para varias barras de progreso circulares. Cuando uso querySelector, funciona solo para un círculo. ¿Cómo puedo usar esta función para múltiples barras de progreso circulares? Nuevamente, ¿por qué este error -> "Error de tipo no detectado: circle.getAttribute no es una función"?
const circle = document.querySelectorAll(".progress"); const number = document.querySelectorAll(".progress-percent"); const val = circle.getAttribute("data-value"); let counter = 0; let cir = 377; setInterval(() => { if (counter == val) { clearInterval(); } else { counter += 1; circle.style.strokeDashoffset = (cir - (cir / 100) * val); number.innerHTML = counter; } }, 25); body { background-color: #f50057; display: flex; justify-content: center; align-items: center; } .progress { stroke: #fff; stroke-width: 2; stroke-dasharray: 377; stroke-dashoffset: 377; transition: 2.5s ease-out; } .progress-percent { color: #fff; } <section> <div> <svg> <circle r="60" cx="60" cy="60"></circle> <circle r="60" cx="60" cy="60" class="progress" data-value="80"></circle> </svg> <p><span class="progress-percent"></span>%</p> </div> <div> <svg> <circle r="60" cx="60" cy="60"></circle> <circle r="60" cx="60" cy="60" class="progress" data-value="90"></circle> </svg> <p><span class="progress-percent"></span>%</p> </div> <div> <svg> <circle r="60" cx="60" cy="60"></circle> <circle r="60" cx="60" cy="60" class="progress" data-value="70"></circle> </svg> <p><span class="progress-percent"></span>%</p> </div> </section>a diferencia de .querySelector , .querySelectorAll devuelve muchos resultados. Las acciones anteriores que llamarías en un solo círculo no se aplicarán automáticamente a cada uno de tus círculos. Sin embargo, puede usar el método .forEach y pasar una función con cada elemento como argumento.
Puedes leer más sobre .forEach aquí
Si tiene alguna pregunta, por favor pregunte. Espero que esto te ayude a orientarte en la dirección correcta 👋
const circles = document.querySelectorAll(".progress"); const numbers = document.querySelectorAll(".progress-percent"); const cir = 377; circles.forEach((circle, index) => { let counter = 0; const val = circle.getAttribute("data-value"); setInterval(() => { if (counter == val) { clearInterval(); } else { counter += 1; circle.style.strokeDashoffset = (cir - (cir / 100) * val); numbers[index].innerHTML = counter; } }, 25); }); body { background-color: #f50057; display: flex; justify-content: center; align-items: center; } .progress { stroke: #fff; stroke-width: 2; stroke-dasharray: 377; stroke-dashoffset: 377; transition: 2.5s ease-out; } .progress-percent { color: #fff; } <section> <div> <svg> <circle r="60" cx="60" cy="60"></circle> <circle r="60" cx="60" cy="60" class="progress" data-value="80"></circle> </svg> <p><span class="progress-percent"></span>%</p> </div> <div> <svg> <circle r="60" cx="60" cy="60"></circle> <circle r="60" cx="60" cy="60" class="progress" data-value="90"></circle> </svg> <p><span class="progress-percent"></span>%</p> </div> <div> <svg> <circle r="60" cx="60" cy="60"></circle> <circle r="60" cx="60" cy="60" class="progress" data-value="70"></circle> </svg> <p><span class="progress-percent"></span>%</p> </div> </section>