Can I use the same JavaScript Function on multiple Div's?

Question

I'm new to javascript and I need to make circle progress that shows percentage with animated bar
luckily I have done it but the problem is I want to make 5 or more of the same circle with the different percentages and **I need to start on page load not by click ** So how to call the function on more than one div so that the circles appears with different percentages at the same time

Here's my JS code

 let firstLayer = document.querySelector('.cardHolder'), secondLayer = document.querySelector('.skillSecond'), startValue = 0, endValue = 50, duration = 20; let progress = setInterval(() => { startValue++ secondLayer.textContent = `${startValue}%` firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)` if (startValue == endValue) { clearInterval(progress) } }, duration);

 .cardHolder { display: flex; justify-content: center; align-items: center; background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg); width: 100px; height: 100px; border-radius: 100%; }.skillFirst { display: flex; justify-content: center; align-items: center; background-color: #90697a; width: 80%; height: 80%; border-radius: 100%; }.skillSecond { font-family: 'Montserrat Subrayada', sans-serif; font-size: 24px; }

 <div class="cardHolder"> <div class="skillFirst"> <div class="skillSecond"> <span class="skillContent"></span> </div> </div> </div>

Answer 1

This is what i came up with. Basically it works by making an array of objects containing the specifications for each individual progressbar. Then loop over the specifications and start every Interval.

 let progression = [ { progressBarId: "first", progressBarLabelId: "first_label", startValue: 0, endValue: 50, duration: 20 }, { progressBarId: "second", progressBarLabelId: "second_label", startValue: 10, endValue: 100, duration: 10 }, { progressBarId: "third", progressBarLabelId: "third_label", startValue: 50, endValue: 80, duration: 20 } ]; window.onload = function() { for(var i = 0; i < progression.length; i++) { let firstLayer = document.getElementById(progression[i].progressBarId), secondLayer = document.getElementById(progression[i].progressBarLabelId), startValue = progression[i].startValue, endValue = progression[i].endValue, duration = progression[i].duration; let progress = setInterval(() => { startValue++ secondLayer.textContent = `${startValue}%` firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)` if (startValue == endValue) { clearInterval(progress) } }, duration); } }

 .cardHolder { display: flex; justify-content: center; align-items: center; background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg); width: 100px; height: 100px; border-radius: 100%; }.skillFirst { display: flex; justify-content: center; align-items: center; background-color: #90697a; width: 80%; height: 80%; border-radius: 100%; }.skillSecond { font-family: 'Montserrat Subrayada', sans-serif; font-size: 24px; }

 <div class="cardHolder" id="first"> <div class="skillFirst"> <div class="skillSecond" id="first_label"> <span class="skillContent" ></span> </div> </div> </div> <div class="cardHolder" id="second"> <div class="skillFirst"> <div class="skillSecond" id="second_label"> <span class="skillContent" ></span> </div> </div> </div> <div class="cardHolder" id="third"> <div class="skillFirst"> <div class="skillSecond" id="third_label"> <span class="skillContent" ></span> </div> </div> </div>

Hope this helps, if not, please comment!