New to JS, trying to stop my div from counting once the counting has completed

Basically i’m a beginner at JS, I’m trying to make this div start counting up when the div scrolls into view and stop counting once its finished counting. I managed to get it kind of working briefly but everytime I scrolled it would start counting again.

Any help is greatly appreciated, thanks.

let stats = document.getElementById('.container-stats');

stats.addEventListener("scroll", () => {
 function counter(id, start, end, duration) {
  let obj = document.getElementById(id),
   current = start,
   range = end - start,
   increment = end > start ? 1 : -1,
   step = Math.abs(Math.floor(duration / range)),
   timer = setInterval(() => {
    current += increment;
    obj.textContent = current;
    if (current == end) {
     clearInterval(timer);
    }
   }, step);
 }
 counter("count1", 0, 6, 3000);
 counter("count2", 100, 40, 3000);
 counter("count3", 499000, 500000, 3000);
 counter("count4", 0, 10, 3000);
 counter("count5", 0, 12, 3000);
 counter("count6", 0, 10, 3000);
});

4 thoughts on “New to JS, trying to stop my div from counting once the counting has completed”

  1. Try using removeEventListener.

    First you should move the lambda in the addEventListener to a function, name it startCounting.

    function startCounting {
     function counter(id, start, end, duration) {
      let obj = document.getElementById(id),
       current = start,
       range = end - start,
       increment = end > start ? 1 : -1,
       step = Math.abs(Math.floor(duration / range)),
       timer = setInterval(() => {
        current += increment;
        obj.textContent = current;
        if (current == end) {
         clearInterval(timer);
        }
       }, step);
     }
     counter("count1", 0, 6, 3000);
     counter("count2", 100, 40, 3000);
     counter("count3", 499000, 500000, 3000);
     counter("count4", 0, 10, 3000);
     counter("count5", 0, 12, 3000);
     counter("count6", 0, 10, 3000);
    
     stats.removeEventListener("scroll", startCounting); // this should detach the scroll event from the stats element
    }
    

    Then use it like this,

    stats.addEventListener("scroll", startCounting);
    

    The difference is that startCounting method will call the removeEventListener in the end.

    Reply
  2. let stats = document.getElementById('container-stats');
    let current = 0;
    
    stats.addEventListener("scroll", () => {
     function counter(id, start, end, duration) {
      if(current !== undefined) {
      let obj = document.getElementById(id),
       current = start,
       range = end - start,
       increment = end > start ? 1 : -1,
       step = Math.abs(Math.floor(duration / range)),
       timer = setInterval(() => {
        current += increment;
        obj.textContent = current;
        if (current == end) {
         clearInterval(timer);
        }
       }, step);
      }
     }
     counter("count1", 0, 6, 3000);
     counter("count2", 100, 40, 3000);
     counter("count3", 499000, 500000, 3000);
     counter("count4", 0, 10, 3000);
     counter("count5", 0, 12, 3000);
     counter("count6", 0, 10, 3000);
    
     current = undefined;
    });
    

    If I understood you correctly, you asked for one session scroll and count right? There you go

    Reply

Leave a Comment