Dmx-bind isn't working for this counter.js script

Wappler General Need Help
1

I’m using this script:
https://codepen.io/syedrafeeq/pen/rcfsJ

and have the numbers counting up perfectly when it’s static values. I thought it would be a simple case of changing it to use dmx-bind but that just gives me a zero.

Static code:
<h1 class="timer count-title count-number" data-to="2000" data-speed="1500">2000</h1>

Attempted dynamic code:
<h1 class="timer count-title count-number" dmx-bind:data-to="{{connStats.data.queryTotalMembers[0].totalMembers}}" data-speed="1500"></h1>

It should work, shouldn’t it? The variable {{connStats.data.queryTotalMembers[0].totalMembers}} is giving me the correct number if I just display it normally.

2

You need to wrap your script in a named function like:

function myCounter() {
 // code here
}

Then call this function on server connect done static event. So enter myCounter() there.

3

Thanks @Teodor. I have it in a separate .js file at the moment. Can I keep it that way?

I have this in my <head>:

<script src="js/counter.js"></script>

4

Still it needs to be initialized on server connect done static event. So you need a named function wrapping the code, which is called on done.

5

OK. Will do that now. Thanks again.

6

Perfect. Works like a charm.

Many thanks @Teodor. Another aspect of Wappler learned.

1 Like