0000088

Just for fun: simple counters at different speeds - Vanilla JavaScript

Updated on October 01, 2021

I saw this question on Stackoverflow and couldn't resist my fingers from tackling it. The main idea is to create a JavaScript algorithm that will make counters count at different speeds depending on the value set on the speed attribute inside the HTML span tag elements.

HTML

I use querySelectorAll() to get all the elements with .counter class, then I define two arrays: speeds[] and count[] which will allow the code to work.

The speeds[] array will save all the speeds of the elements. The purpose of this, is to use all these speeds variable for summing up the respective count[pos] varible inside the setInterval() method, allowing all counters to have their own independent count. The arrays are filled using the push() method inside a loop which will iterate through all elements inside the counters static NodeList.

JavaScript

The first conditional statement will clear the setInterval() method once the count[] variable counter equals 1000, which will cause the count to stop for all the counters.

Title

Post Body

<iframe width="100%" height="200" src="//jsfiddle.net/Gass_snippets/4pvg7w16/25/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<p>
I saw <a href="https://stackoverflow.com/questions/69265494/simple-counters-dataset-not-working-properly">this</a> question on Stackoverflow and couldn't resist my fingers from tackling it. The main idea is to create a JavaScript algorithm that will make counters count at different speeds depending on the value set on the speed attribute inside the HTML  <code class="language-html">span</code> tag elements.
</p>
<h5>HTML</h5>
<script type="text/plain" class="language-html"><span class="counter" speed="1"></span><br>
<span class="counter" speed="2"></span><br>
<span class="counter" speed="3"></span><br>
<span class="counter" speed="4"></span><br>
</script>

<p>
I use <code class="language-js">querySelectorAll()</code> to get all the elements with <code class="language-css">.counter</code> class, then  I define two arrays: <code class="language-js">speeds[]</code> and <code class="language-js">count[]</code> which will allow the code to work.
</p>
<p>
The <code class="language-js">speeds[]</code> array will save all the speeds of the elements. The purpose of this, is to use all these speeds variable for summing up the respective <code class="language-js">count[pos]</code> varible inside the <code class="language-js">setInterval()</code> method, allowing all counters to have their own independent count.

The arrays are filled using the <code class="language-js">push()</code> method inside a loop which will iterate through all elements inside the <code class="language-js">counters</code> static NodeList.
</p>
<h5>JavaScript</h5>
<script type="text/plain" class="language-javascript">document.getElementById('btn').addEventListener('click', () => {
  const counters = document.querySelectorAll('.counter');
  var speeds = [], count = [];

for(counter of counters){
    count.push(0);
    speeds.push(parseInt(counter.getAttribute('speed')));
  }

for(var pos = 0; pos < counters.length; pos++){
    (function(pos) {
      var interval = setInterval(() => { 
          count[pos] = count[pos] + speeds[pos];
          counters[pos].innerHTML = count[pos];
          if(count[pos] === 1000){clearInterval(interval)}
          if(count[pos] > 990){speeds[pos] = 1}
        }, 1)
    })(pos);
  }
});
</script>
<p>
The first conditional statement  will clear the <code class="language-js">setInterval()</code> method once the <code class="language-js">count[]</code> variable counter equals 1000, which will cause the count to stop for all the counters.
</p>