# Counter not initializing

**URL:** <https://community.hubspot.com/t/counter-not-initializing/69311>\
**Category:** CMS Development\
**Created:** [November 15, 2022, 6:02pm UTC](https://community.hubspot.com/t/counter-not-initializing/69311 "2022-11-15T18:02:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![FilipaPF](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@FilipaPF](https://community.hubspot.com/u/FilipaPF)\
**Post date:** [November 15, 2022, 6:02pm UTC](https://community.hubspot.com/t/counter-not-initializing/69311/1 "2022-11-15T18:02:06Z")

</div>

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:

```lia-code-sample
<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:

```lia-code-sample
{% 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:

```lia-code-sample
.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:

```lia-code-sample
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:

 ![counter.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22c687ffc36560cd28d78c1060b757827c0118ba.png)

What am I missing?

Thank you!

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [November 15, 2022, 7:48pm UTC](https://community.hubspot.com/t/counter-not-initializing/69311/2 "2022-11-15T19:48:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![FilipaPF](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@FilipaPF](https://community.hubspot.com/u/FilipaPF)\
**Post date:** [November 15, 2022, 8:12pm UTC](https://community.hubspot.com/t/counter-not-initializing/69311/3 "2022-11-15T20:12:48Z")

</div>

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