Change count JavaScript function

Question

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>

Can you explain this ? :I want it to simply count to the lower value of 30. — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Nov 14, 2016 at 18:47
sure, sorry formy terrible explaining. the class"number" in this instance is 30 so i basically want the counter to just count up to 30 .... or whatever is in that html area ... in this instance it is 30 ... the counter seems to count all the way up to the higher figure which is 40 — greggycoding
– greggycoding, Commented Nov 14, 2016 at 19:04

Dan Nagle · Accepted Answer · 2016-11-14 19:19:56Z

1

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>

answered Nov 14, 2016 at 19:19

Dan Nagle

5,4851 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

greggycoding Over a year ago

That worked although not entirely sure what was wrong there ? thanks so much for your help

greggycoding Over a year ago

the only issue with this is that it appends the larger number text and not the "before"

Dan Nagle Over a year ago

The ".value > .number" selector was setting the end value for the count to 40. Changing the selector to ".count > .number" set the value to 30.

Collectives™ on Stack Overflow

Change count JavaScript function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related