CODEWITHSUNDEEP
javascripthtml
zunae
zunae

Reputation: 17

How to apply count up function to multiple values on the page?

I have dynamically generated values inside a table. Each of those values contains an int (number in seconds).

Now I want to count them up

function startCount() {
  var time = $(".count").text();

  setInterval(function() {
    ++time;
  }, 1000);

  $(".count").text(time);
}
<div class="count">270219</div>
<div class="count">265454</div>
<div class="count">312565</div>
<div class="count">254587</div>

However, when I do that, it concatenates all the values, instead of counting them up individually.

If I use "Id" instead of "class" it picks just the first value, without taking care of the others.

The startCount() is fired in my Ajax complete function.

What can I do?

Upvotes: 1

Views: 1101

Answers (5)

Arthur
Arthur

Reputation: 5148

This answer already have been answered but I just want to propose a ES6 solution without jQuery

const startCount = () => {
  setInterval(() => {
    Array.from(document.querySelectorAll('.count')).forEach(count => {
      count.textContent = Number(count.textContent) + 1;
    });
  }, 1000);
};
startCount ();
<div class="count">270219</div>
<div class="count">265454</div>
<div class="count">312565</div>
<div class="count">254587</div>

If you do NOT want to update the HTML (add, remove .count elements) you can store the list on a variable to avoid looking the DOM every second.

(() => {
  // This will be only one time
  const counts = Array.from(document.querySelectorAll('.count'));
  setInterval(() => {
    // Will be executed every seconds
    counts.forEach(count => {
      count.textContent = Number(count.textContent) + 1;
    });
  }, 1000);
})();
<div class="count">270219</div>
<div class="count">265454</div>
<div class="count">312565</div>
<div class="count">254587</div>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177955

Without the .each

function startCount() {
  setInterval(function() {
    $(".count").text(function() {
      var val = +$(this).text();
      return ++val;
    })
  }, 1000);
}
startCount()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="count">270219</div>
<div class="count">265454</div>
<div class="count">312565</div>
<div class="count">254587</div>

Easier to read

function startCount() {
  setInterval(function() {
    $(".count").text(function() {
      var val = +$(this).data("secs");
      $(this).data("secs",++val);
      return new Date(val * 1000).toISOString().substr(11, 8);
    })
  }, 1000);
}
startCount()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="count" data-secs="270219"></div>
<div class="count" data-secs="265454"></div>
<div class="count" data-secs="312565"></div>
<div class="count" data-secs="254587"></div>

Upvotes: 2

fiveobjects
fiveobjects

Reputation: 4289

Late to the party. However, you need to:

  • Iterate over all .count elements
  • Read the current value of an element as an integer
  • Increment the value and set it back
  • Do this using an interval

<div class="count">270219</div>
<div class="count">265454</div>
<div class="count">312565</div>
<div class="count">254587</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    function startCount() {
        setInterval(function () {
            $(".count").each((i, e) => {
                val = +$(e).text();
                $(e).text(++val);
            });
        }, 1000);
    }
    startCount();
</script>

Upvotes: 0

shrys
shrys

Reputation: 5940

You could use .each() on the elements that you've got from the selector, unary operator(+) to convert the string to number:

function startCount() {
  setInterval(function() {
    $(".count").each(function(idx, element) {
      var time = +$(this).text();
      $(element).html(++time);
    });
  }, 1000);
}
startCount();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="count">270219</div>
<div class="count">265454</div>
<div class="count">312565</div>
<div class="count">254587</div>

Upvotes: 0

Turtlefight
Turtlefight

Reputation: 10710

You need to loop over the individual .count nodes and set the new text for each of them.

  • You can use jquery's .each() function to loop over the individual elements
  • then use Number() to convert the text of the .count nodes to a number

Example: 

function startCount() {
  setInterval(function() {
    $(".count").each(function() {
      let el = $(this);
      let time = Number(el.text()) + 1;
      el.text(time);
    });
  }, 1000);
}

startCount();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="count">270219</div>
<div class="count">265454</div>
<div class="count">312565</div>
<div class="count">254587</div>

Upvotes: 1

Related Questions