jQuery Counter Remains at "0" and doesn't count up-CodePudding

I am trying to make a certain section of my website animate a count up. However, when I load the website nothing runs and it remains at "0". I have jQuery at the start of my HTML script in the head section <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({countNum: $this.text()}).animate({
      countNum: countTo
    },
    {
      duration: 8000,
      easing: 'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="col-md-4 showinmbl">
  <h4 class="txt-primary  fs40 mb-0" class="counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>
  <p class="fs30 weight500" style="font-family: 'Inter', sans-serif; font-weight: 600;">Wins</p>
</div>

Why isn't it counting?

CodePudding user response：

You have set class attribute twice in your h4 tag. That's why it's not working. Check this working example here.

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({countNum: $this.text()}).animate({
      countNum: countTo
    },
    {
      duration: 8000,
      easing: 'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="col-md-4 showinmbl">
  <h4 class="txt-primary  fs40 mb-0 counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>
  <p class="fs30 weight500" style="font-family: 'Inter', sans-serif; font-weight: 600;">Wins</p>
</div>

CodePudding user response：

The problem is because of your HTML code. this line:

  <h4 class="txt-primary  fs40 mb-0" class="counter" data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>

You have set class attribute twice, here is the problem, you can change your h4 tag like this and it will work:

  <h4 class="txt-primary fs40 mb-0 counter"  data-count="150" style="font-family: 'Inter', sans-serif; font-weight: 500;">0</h4>