CODEWITHSUNDEEP
javascriptjqueryhtml
Ibrahim S. Gerbiqi
Ibrahim S. Gerbiqi

Reputation: 264

Adding text on number counter

I was trying to make counter animation but when i write a text it says NaN when i write only numbers it works perfectly

HTML

<div class="counter-value" data-count="300">300</div>
      <div class="counter-value" data-count="400">100</div>
      <div class="counter-value" data-count="1500">200</div>
    </div>

JavaScript

var a = 0;
$(window).scroll(function () {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function () {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {

          duration: 2000,
          easing: 'swing',
          step: function () {
            $this.text(Math.floor(this.countNum));
          },
          complete: function () {
            $this.text(this.countNum);

          }

        });
    });
    a = 1;
  }

});

What I'm trying to do is:

300+sometext
400+sometext
1500+sometext

Upvotes: 1

Views: 1240

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Just do two things to handle it. Replace the following functions with the following code:

step: function() {
  $this.text(Math.floor(parseInt(this.countNum, 10)));
},
complete: function() {
  $this.text(this.countNum + " some text...");
}

Upvotes: 2

Related Questions