I have 4 counters , each of them should count to a value different from the other's But I want them to start and end at the same time , can this be achieved using pure js
let count1 = 0,
count2 = 0,
count3 = 0,
count4 = 0
let first = document.getElementById("projects")
let second = document.getElementById("clients")
let third = document.getElementById("awards")
let fourth = document.getElementById("countries")
let firstInterval = setInterval(counter1,100)
let secondInterval = setInterval(counter2,100)
let thirdInterval = setInterval(counter3,100)
let fourthInterval = setInterval(counter4,100)
function counter1(){
if(count1 > 127){
clearInterval(firstInterval)
}
count1++
first.innerHTML = count1
}
function counter2(){
if(count2 > 63){
clearInterval(secondInterval)
}
count2++
second.innerHTML = count2
}
function counter3(){
if(count3 > 18){
clearInterval(thirdInterval)
}
count3++
third.innerHTML = count3
}
function counter4(){
if(count4 > 27){
clearInterval(fourthInterval)
}
count4++
fourth.innerHTML = count4
}Perhaps this modified example can help you:
let count1 = 0,
count2 = 0,
count3 = 0,
count4 = 0
const first = document.getElementById("projects");
const firstLimit = 127;
const second = document.getElementById("clients");
const secondLimit = 63;
const third = document.getElementById("awards");
const thirdLimit = 63;
const fourth = document.getElementById("countries");
const fourthLimit = 27;
const time = 3000;
const firstInterval = setInterval(counter1, time / firstLimit)
const secondInterval = setInterval(counter2, time / secondLimit)
const thirdInterval = setInterval(counter3, time / thirdLimit)
const fourthInterval = setInterval(counter4, time / fourthLimit)
function counter1(){
if(count1 > firstLimit){
clearInterval(firstInterval)
}
count1++
first.innerHTML = count1
}
function counter2(){
if(count2 > secondLimit){
clearInterval(secondInterval)
}
count2++
second.innerHTML = count2
}
function counter3(){
if(count3 > thirdLimit){
clearInterval(thirdInterval)
}
count3++
third.innerHTML = count3
}
function counter4(){
if(count4 > fourthLimit){
clearInterval(fourthInterval)
}
count4++
fourth.innerHTML = count4
}<div id="projects"></div>
<div id="clients"></div>
<div id="awards"></div>
<div id="countries"></div>