CODEWITHSUNDEEP
javascripthtml
ExcellentSP
ExcellentSP

Reputation: 1619

How to count up starting at any specified number in javascript?

Say I have a number in a div:

<div id="value">100</div>

And I have this javascript acting on it:

function animateValue(id){
    var obj = document.getElementById(id);
    var current = obj.innerHTML;
    setInterval(function(){
        current++;
    },1000);
}

animateValue(value);

To my understanding, this script translates to:

• Grab the HTML element called (in this case) "value" and store it in "obj"
• Take the inner html from obj and store it in "current"
• Take the "current" variable and increment it every second

It was supposed to take the content of #value and increment it up by one every second, but instead it does nothing. How do I solve this? What have I done wrong? As you can tell, I am not experienced in javascript, so go easy on me.

Upvotes: 3

Views: 16395

Answers (5)

Tcip
Tcip

Reputation: 1

Somewhat lighter and more readable (for me). JSFiddle: https://jsfiddle.net/Tcip/72Lv5rya/

function animateValue(e) {
  var n = document.getElementById(e);
  var a = n.innerHTML;
  setInterval((function() {
    a++;
    n.innerHTML = a
  }), 1000)
}
animateValue("value");
<div id="value">100</div>

Upvotes: 0

rszczypka
rszczypka

Reputation: 43

Here is the JSFiddle example solving your problem: http://jsfiddle.net/rszczypka/f5jfn5bo/

the html part:

<div id="value">100</div>

the javascript part:

function animateValue(id){
    var obj = document.getElementById(id);
    var current = parseInt(obj.innerHTML);

    setInterval(function(){
        obj.innerHTML = current++;
    },1000);
}

animateValue('value');

Upvotes: 1

edd2110
edd2110

Reputation: 324

Use jQuery. It's easier... The other answers are more complex, this is an easy one.. No parse or something like that.... Simpler code, more effective.

So, It's more simple than you think: First... check the current value, then add and print

                $(function(){
                    //Get Current HTML
                    var currentValue = $("#value").html();

                    //do this every 1000 ms (1 second)
                    setInterval(function(){
                        //add the value to the current
                        var newValue = currentValue++
                        // print the new value
                        $("#value").html(newValue);

                    },1000)
                })

Upvotes: 1

Sam Greenhalgh
Sam Greenhalgh

Reputation: 6136

I'm not sure if you wanted to update the contents of the DIV. Maybe this is what you wanted?

function animateValue(id){
    var obj = document.getElementById(id);
    var current = parseInt(obj.innerHTML);
    setInterval(function(){
        current++;
        // Update the contents of the element
        obj.innerHTML = current;
    },1000);
}

animateValue('value');

http://jsfiddle.net/L1q5t9gz/

Upvotes: 1

Adam D. Ruppe
Adam D. Ruppe

Reputation: 25595

You changed the current number but never updated the innerHTML of the obj, which is what is actually displayed. If you set obj.innerHTML = current; right after current++ it should do something for you.

And change animateValue(value); to animateValue('value'); (thanks, @nevermind)

Upvotes: 4

Related Questions