This querySelectorAll does not work for multiple circular progress bar. When I use querySelector it works for only one circle. How can i use this function for multiple circular progress bar. Again, why this error -> "Uncaught TypeError: circle.getAttribute is not a function" ?
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>unlike .querySelector, .querySelectorAll returns many results. The previous actions that you would call on a single circle will not automatically apply to each of your circles. However, you can use the .forEach method and pass a function with each item as an argument.
you can read more about .forEach here
If you have any questions, please ask. Hopefully this helps point you in the right direction ๐
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>