Counter not initializing

[FilipaPF]

Hello!

I created a custom module and inserted it into the html template. Everything seems to work fine except the counter is not initializing. 

Here's my module code:

HTML: 

<div class="container-fluid bg-vg" id="corporate-stats">
  <div class="container">
    <div class="row justify-content-around py-3 text-center company-stats">
      {% import "/vg-theme/templates/partials/stats.html" %}
      {% for stat in stats %}
      <div class="col-10 col-sm-2 py-5 py-sm-0">
        <span class="company-stats-number text-vg3 fs-4"><span class="counter counter-{{ stat.shortname }}"></span><span class="counter-default">{{ stat.to_animate }}</span>{{ stat.animate_appendage }}</span>
        <span class="company-stats-text text-white small">{{ stat.desc }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

HTML partial:

{% set stats = 
    [
      { 'shortname' : 'oftop', 'displaynumber' : '30', 'to_animate' : '30', 'animate_appendage' : '', 'desc' : 'Lorem ipsum' },
      { 'shortname' : 'sites', 'displaynumber' : '300', 'to_animate' : '300', 'animate_appendage' : '+', 'desc' : 'Lorem ipsum' },
      { 'shortname' : 'systems', 'displaynumber' : '100,000+', 'to_animate' : '100', 'animate_appendage' : ',000+', 'desc' : 'Lorem ipsum' },
      { 'shortname' : 'users', 'displaynumber' : '30,000+', 'to_animate' : '30', 'animate_appendage' : ',000+', 'desc' : 'Lorem ipsums' },
      { 'shortname' : 'experience', 'displaynumber' : '17', 'to_animate' : '17', 'animate_appendage' : '', 'desc' : 'Lorem ipsum' }
    ]
  %}

CSS:

.company-stats-number {
display: block;
}

@media only screen and (min-width: 35em) { /* wide screen */

{# starting values before animation #}
.counter-default { display: none; }
.company-stats-number { color: var(--color-lightblue_10); }

@property --num {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}

.go.company-stats-number { animation: color_change 1s ease-in forwards; }
.go.company-stats-text { animation: fadein 1s ease-in forwards; }
.go.corporate-stats-header { animation: fadein .5s ease-in forwards; }

span.go.counter.counter-oftop { animation: counter 5s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-oftop { --num: 30 }

span.go.counter.counter-sites { animation: counter 6.5s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-sites { --num: 300 }

span.go.counter.counter-systems { animation: counter 7s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-systems { --num: 100 }

span.go.counter.counter-users { animation: counter 6s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-users { --num: 30 }

span.go.counter.counter-experience { animation: counter 4s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-experience { --num: 15 }

span.counter::after {
content: counter(num);
}

@keyframes counter {
from {
--num: 0;
}
}

@keyframes fadein {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

}

JS:

window.addEventListener('scroll', function (event) {
  
  var stats = document.querySelector('#corporate-stats');
  var stats_position = stats.getBoundingClientRect();
  var counter_object_containers = document.querySelectorAll('.company-stats-number');
  var counter_objects = document.querySelectorAll('.counter');
  var counter_descriptors = document.querySelectorAll('.company-stats-text');

  if (
    stats_position.top >= 0 &&
    stats_position.left >= 0 &&
    stats_position.right <= (window.innerWidth || document.documentElement.clientWidth) &&
    stats_position.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    ) 
      {
        // console.log('v26');
        header.classList.add('go');
        for (var i = 0; i < counter_object_containers.length; i++) {
          counter_object_containers[i].classList.add('go');
        }
        for (var i = 0; i < counter_objects.length; i++) {
          counter_objects[i].classList.add('go');
        }
        for (var i = 0; i < counter_descriptors.length; i++) {
          counter_descriptors[i].classList.add('go');
        }
      } else {
        //
      }

}, false);

The output:

What am I missing?

Thank you!

[alyssamwilie · Accepted solution]

When I remove that first line in the if statement it works.

header.classList.add('go');

header isn't defined anywhere in the code so it's breaking there. If you were trying to get the header element you should use document.querySelector('header') but based on the rest of your code I'm not seeing any purpose for that so I'd just remove the line.

Will note this only works in-page and not in the module preview since we're unable to activate a scroll event when in module preview.

[FilipaPF]

That's it!! It works now! Thank you very much 🙂