In html I have mentioned a class with id="txt"

<p id="txt">1</p>

I need to add 1 per every 500miliseconds interval. I used the following code but it didnot work.

function timedText() {
    var x = document.getElementById('txt');

    setInterval(function () {x= "(parseInt(x, 10)+ 1).toString(10)";},500);


}

The above function is called when a button is clicked.

In html I have mentioned a class with id="txt"

<p id="txt">1</p>

I need to add 1 per every 500miliseconds interval. I used the following code but it didnot work.

function timedText() {
    var x = document.getElementById('txt');

    setInterval(function () {x= "(parseInt(x, 10)+ 1).toString(10)";},500);


}

The above function is called when a button is clicked.

• javascript
• html
• timer
• setinterval
• parseint

• What you did now was change the variable content, not the content of the <p> element. If you want to change the text inside the <p> element, you need to use innerHTML (innerText and textContent are also an option, but these can behave differently in different browsers). Besides that, functions and constructors will not work if you write them as a string. You don't need to use those double quotes. – Praxis Ashelin Commented Sep 12, 2014 at 10:22
• @DarkAshelin, I did see you editing my post and I wasn't sure if it was intentional or not. I would've accepted the edit had it been the way I wanted to explain my answer. Anyway, I didn't want you to think I was being rude, so I'm dropping a note here. xo – Mulan Commented Sep 12, 2014 at 10:36
• @naomik ah, I figured you didn't notice the suggested edit since you were mini-editing inbetween (which always overwrote my edit). So I just gave up after a couple of tries xD Apparently it's a thing to post short answers quick, and then keep expanding them (as opposite to posting a plete answer from the start). I didn't know that. – Praxis Ashelin Commented Sep 12, 2014 at 10:39
• @DarkAshelin yeah. I usually give a bare minimum answer first so the OP can get what they need right away. Then I'll expand it to include a more detailed solution. And if I'm feeling ambitious, I'll go back and add explanations as needed so that a wider audience can benefit from the info. – Mulan Commented Sep 12, 2014 at 16:55

3 Answers 3

JavaScript does not support string interpolation. I don't think you intended to use it, but anything within single quotes (') or double quotes (") will not be evaluated by JavaScript.

To properly increment the value in your P tag, you will need this

// valid
x.innerHTML = (parseInt(x.innerHTML, 10)+ 1).toString(10);

Not this

// invalid
x = "(parseInt(x, 10)+ 1).toString(10)";

The above solution is pretty short-sighted, though. It couples your element, the counter increment, and the counter's delay all within a single function call. Not to mention, we're re-parsing the string to get the integer each time we increment.

What if we wrap a little object around this that keeps the counter value in a variable? The object could also contain its own interval function and corresponding interval timer.

Let's see what that might look like

function Counter(elem, delay) {
  var value = parseInt(elem.innerHTML, 10);
  var interval;

  function increment() {
    return value += 1; // This 1 could be turned into a variable that allows
                       // us to count by any value we want. I'll leave that
                       // as a lesson for you !
  }

  function updateDisplay(value) {
    elem.innerHTML = value;
  }

  function run() {
    updateDisplay(increment());
  }

  function start() {
    interval = window.setInterval(run, delay);
  }

  // exports
  // This actually creates a function that our counter can call
  // you'll see it used below.
  //
  // The other functions above cannot be accessed from outside
  // this function.
  this.start = start;
}

Of course this Counter could be vastly simplified, but this demonstrates good separation of concerns. The Counter is initializes with the elements starting innerHTML and all operations of the counter are nicely divided into single-purpose functions. You can use this same approach for building much more plex objects, but still keep the code very sane and reusable.

Now you can use your counter on any element

// get element
var elem = document.getElementById("txt");

// create counter with element and delay of 500ms
var counter = new Counter(elem, 500);

// start the counter
counter.start();

jsfiddle demo

i have built on @user633183 answer and created this jsfiddle

it switches titles according to the timer he created. maybe its useful for others as well

function Counter(elem, delay) {
var value = parseInt(elem.getAttribute("value"), 10);
var interval;

var titles = [
    "hello i am the first title",
    "whats up, i am the second title",
    "add here any extra titles you want"
];

function updateDisplay(value) {
    elem.innerHTML = value;
}

function run() {
    value += 1;
    if (value == titles.length) value = 0;

    elem.setAttribute("value", value);
    updateDisplay(titles[value]);
}

function start() {
    interval = window.setInterval(run, delay);
}

// exports
// This actually creates a function that our counter can call
// you'll see it used below.
//
// The other functions above cannot be accessed from outside
// this function.
this.start = start;
}

var elem = document.getElementById("title-switcher");

counter = new Counter(elem, 2000);
counter.start();

jsfiddle

You are setting x again to a string not setting it's innerHTML

function timedText() {
  var x = document.getElementById('txt');
  setInterval(function () {
     //set the inner html, parse the value from the inner html as well
     x.innerHTML = (parseInt(x.innerHTML, 10) + 1);
  }, 500);
}

here is a working fiddle http://jsfiddle/leighking2/sx6qw45y/