如何为具有相同名称的 div 显示相同的功能？

Question

I built a script that has a data-target. When I load the page it will make a transition with 1ms from 0 to the data-target I selected. Now, for the first one works just fine, but I have 2 other divs with the same class, and I want them to do the same thing, the last 2 have different data-targets, of course.

I tried querySelectorAll, never worked, maybe forEach? But I don't fully understand how to use it. Can anybody help me fix this problem?

 let divContainer = document.querySelector('.test'); let dataTarget = divContainer.getAttribute('data-target'); let divValue = 0; function increaseAnimation() { if (divValue <= dataTarget) { divContainer.innerHTML = divValue; divValue = divValue + 1; setTimeout(increaseAnimation, 1); } } increaseAnimation();

 <p>Start</p> <div class="test" data-target="300"></div> <p>Middle</p> <div class="test" data-target="500"></div> <p>End</p> <div class="test" data-target="500"></div>

Answer 1

querySelectorAll is likely to feature in the solution, yes. For instance, if you want all of the counters to run at the same time, you find all the .test elements and do the same thing with all of them:

 document.querySelectorAll('.test').forEach(divContainer => { // There will be separate copies for each of these for each `.test` element let dataTarget = divContainer.getAttribute('data-target'); let divValue = 0; function increaseAnimation() { if (divValue <= dataTarget) { divContainer.innerHTML = divValue; divValue = divValue + 1; setTimeout(increaseAnimation, 1); } } increaseAnimation(); });

 <p>Start</p> <div class="test" data-target="300"></div> <p>Middle</p> <div class="test" data-target="500"></div> <p>End</p> <div class="test" data-target="500"></div>

If you want to do them one after another, you'd probably store the list and remember the index of the current one, then move on to the next when done with it:

 const divContainers = document.querySelectorAll('.test'); let index = 0; processCurrentContainer(); function processCurrentContainer() { const divContainer = divContainers[index]; if (!divContainer) { return; } let dataTarget = divContainer.getAttribute('data-target'); let divValue = 0; function increaseAnimation() { if (divValue <= dataTarget) { divContainer.innerHTML = divValue; divValue = divValue + 1; setTimeout(increaseAnimation, 1); } else { // Done with this one, do the next if any ++index; processCurrentContainer(); } } increaseAnimation(); }

 <p>Start</p> <div class="test" data-target="300"></div> <p>Middle</p> <div class="test" data-target="500"></div> <p>End</p> <div class="test" data-target="500"></div>

---

Side note:

Depending on how you want this animation to behave, you might want to use requestAnimationFrame rather than setTimeout . With your current code, although the code requests a callback after 1ms, it will frequently be longer than that, potentially much longer, and the updates you're making aren't synchronized with the browser's painting of the page, which it will do 60 times/second at most (roughly 16.67ms between frames). That means that if you want the animation to last exactly X milliseconds from beginning to end, the current code won't do that; it'll last longer than X milliseconds. Here's the one-after-another example above measuring how long each segment took:

 const divContainers = document.querySelectorAll('.test'); let index = 0; processCurrentContainer(); function processCurrentContainer() { const start = Date.now(); const divContainer = divContainers[index]; if (!divContainer) { return; } let dataTarget = divContainer.getAttribute('data-target'); let divValue = 0; function increaseAnimation() { if (divValue <= dataTarget) { divContainer.innerHTML = divValue; divValue = divValue + 1; setTimeout(increaseAnimation, 1); } else { // Done with this one, do the next if any console.log(`Done, dataTarget = ${dataTarget}, elapsed = ${Date.now() - start}ms`); ++index; processCurrentContainer(); } } increaseAnimation(); }

 <p>Start</p> <div class="test" data-target="300"></div> <p>Middle</p> <div class="test" data-target="500"></div> <p>End</p> <div class="test" data-target="500"></div>

To make it last X milliseconds more accurately (though not perfectly), and to avoid doing repeated calls to increaseAnimation when the browser hasn't done any painting in-between, use requestAnimationFrame to request a callback just before the browser paints the page, then figure how how many milliseconds have passed since the last time you updated, and update your animation appropriately for that number of milliseconds. For instance, here's the one-after-another animation done that way:

 const divContainers = document.querySelectorAll('.test'); let index = 0; processCurrentContainer(); function processCurrentContainer() { const start = Date.now(); const divContainer = divContainers[index]; if (!divContainer) { return; } let dataTarget = divContainer.getAttribute('data-target'); let divValue = 0; let lastPainted = Date.now(); requestAnimationFrame(increaseAnimation); function increaseAnimation() { if (divValue <= dataTarget) { divContainer.innerHTML = divValue; const now = Date.now(); const elapsed = Date.now() - lastPainted; lastPainted = now; divValue += elapsed; // Since the value is meant to increase by milliseconds requestAnimationFrame(increaseAnimation); } else { // Done with this one, do the next if any console.log(`Done, dataTarget = ${dataTarget}, elapsed = ${Date.now() - start}ms`); ++index; processCurrentContainer(); } } }

 <p>Start</p> <div class="test" data-target="300"></div> <p>Middle</p> <div class="test" data-target="500"></div> <p>End</p> <div class="test" data-target="500"></div>

Answer 2

Instead of document.queryselector() you should use document.getElementsByClassName() . Please check this code :

 let divContainer = document.getElementsByClassName('test'); console.log(divContainer); for (let k of divContainer) { let dataTarget = k.getAttribute('data-target'); console.log(dataTarget); let divValue = 0; function increaseAnimation() { if (divValue <= dataTarget) { k.innerHTML = divValue; divValue = divValue + 1; setTimeout(increaseAnimation, 1); } } increaseAnimation(); }

 <body> <p>Start</p> <div class="test" data-target="300"></div> <p>Middle</p> <div class="test" data-target="500"></div> <p>End</p> <div class="test" data-target="500"></div> </body>

Answer 3

1. Use querySelectorAll to get an Array of elements.
2. Loop through each element.
3. Get the data-target attribute and the textContent of the element. So if you wrap the number in a span or <b> , you still only get the number, and not the full code.
4. Place the container in the loop in a new array, if the condition haven't been met.
5. Replace divContainer with the new array.

I would rather go with requestAnimationFrame rather than setTimeout, to avoid unnecessary calculations.

It doesn't matter if you go with 0ms och 1ms in the setTimeout loop. setTimeout and setInterval means that it won't trigger until that amount of time have passed, meaning that more time could pass before the method is executed.

 var divContainer = document.querySelectorAll('.test'); // 1 function increaseAnimation() { let newIndex = 0; let newDivContainerArr = []; divContainer.forEach((container) => { // 2 let dataTarget = container.getAttribute('data-target'); // 3 let divValue = Number(container.textContent); container.textContent = ++divValue; if (divValue != dataTarget) { // 4 newDivContainerArr[newIndex++] = container; } }); divContainer = newDivContainerArr; // 5 if (divContainer.length) { setTimeout(increaseAnimation, 0); } } increaseAnimation();

 <p>Start</p> <div class="test" data-target="300"></div> <p>Middle</p> <div class="test" data-target="500"></div> <p>End</p> <div class="test" data-target="500"></div>

Answer 4

I prefer simplicity, efficiency and readability:

 function increaseAnimation(el) { const dataTarget = el.dataset.target; let value = 0; function iteration(){ if (value < dataTarget) { el.innerHTML = value+=1; requestAnimationFrame(iteration); } } requestAnimationFrame(iteration) } document.querySelectorAll('.test').forEach( el => { increaseAnimation(el); })

 <p>Start</p> <div class="test" data-target="300"></div> <p>Middle</p> <div class="test" data-target="400"></div> <p>End</p> <div class="test" data-target="500"></div>

By the way if prefer faster animation you can increase the incrementation value like this:

el.innerHTML = value+=2; //3 , 4, ...