CODEWITHSUNDEEP
javascriptjqueryhtml
greggycoding
greggycoding

Reputation: 55

Change count JavaScript function

Currently, this function seems to count all the way to the higher value. I want it to simply count to the lower value of 30.

This is the script:

$(".circleStatsItemBox").each(function() {
  var value = $(this).find(".value > .number").html();
  var unit = $(this).find(".value > .unit").html();
  var percent = $(this).find("input").val() / 100;

  countSpeed = 2300 * percent;
  endValue = value;

  $(this).find(".count > .unit").html(unit);
  $(this).find(".count > .number").countTo({
    from: 0,
    to: endValue,
    speed: countSpeed,
    refreshInterval: 50
  });

  //$(this).find(".count").html(value*percent + unit);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mhuggins/jquery-countTo/master/jquery.countTo.js"></script>
<div class="circleStatsItemBox yellow">
  <div class="header">Levels of Interest</div>
  <span class="percent">% Increase</span>
  <div class="circleStat">
    <input value="25" class="whiteCircle" type="text">
  </div>
  <div class="footer"><span class="count"> 
    <span class="number">30</span>
    <span class="unit">Before</span>
    </span> <span class="sep"> / </span>
    <span class="value"> 
<span class="number">40</span>
    <span class="unit"> During</span>
    </span>
  </div>
</div>

Upvotes: 2

Views: 1366

Answers (1)

Dan Nagle
Dan Nagle

Reputation: 5425

You need to change a selector in the JavaScript code.

var value = $(this).find(".count > .number").html();


$(".circleStatsItemBox").each(function() {
  var value = $(this).find(".count > .number").html();
  var unit = $(this).find(".value > .unit").html();
  var percent = $(this).find("input").val() / 100;

  countSpeed = 2300 * percent;
  endValue = value;

  $(this).find(".count > .unit").html(unit);
  $(this).find(".count > .number").countTo({
    from: 0,
    to: endValue,
    speed: countSpeed,
    refreshInterval: 50
  });

  //$(this).find(".count").html(value*percent + unit);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mhuggins/jquery-countTo/master/jquery.countTo.js"></script>
<div class="circleStatsItemBox yellow">
  <div class="header">Levels of Interest</div>
  <span class="percent">% Increase</span>
  <div class="circleStat">
    <input value="25" class="whiteCircle" type="text">
  </div>
  <div class="footer">
    <span class="count"> 
      <span class="number">30</span>
      <span class="unit">Before</span>
    </span>
    <span class="sep"> / </span>
    <span class="value"> 
      <span class="number">40</span>
      <span class="unit"> During</span>
    </span>
  </div>
</div>

Upvotes: 1

Related Questions