Question

Someone know if after I displays an HTML page I can access a specific ID (getElementById), and change it a value several times?

I want to present a client-side some string and change it several times according the progress of the program, but I can not, it writes to me only recently.

For example:

<script type="text/javascript">
  function foo(){
   for(var i = 0; i<10000; i++){
     document.getElementById('myTag').innerHTML = i;
   }
  }
</script>

In this case, I do not see the numbers run. I see only the last one.

If I put alert inside the loop – the value is changed.

Answer 1

You’re almost there. The only thing you’re doing wrong is replacing the innerHTML content instead of adding to it. Change this:

document.getElementById('myTag').innerHTML = i;

to this:

document.getElementById('myTag').innerHTML += i;

---

Additional/alternative answer:

Wait. I’ve just reread your question and realized that there is another way of interpreting it. The way you ask it is quite vague so I’m leaving the above answer as is.

The reason you don’t see “running numbers” as you process the for loop is because you misunderstand how javascript works in the browser.

The browser’s event loop runs something like this:

1. Fetch content
2. Run javscript
3. Render content
then repeat forever

This is how javascript works. So running a simple for loop like you’re doing. The browser executes the script until there is nothing else to execute (step 2). Once javascript have finished executing then it will start the render process (step 3). Obviously, by this time the value of i is the final value and therefore you only see the final value.

The browser never interrupts running javascript to render/update the page. So, how do people implement countdown timers etc? They do it by scheduling a piece of javascript to execute in the next iteration of the event loop. That is to say, the let the browser enter step 3 and at the appropriate moment as the browser enters step 2 again they run the script they want.

Javascript basically provides two ways to do this: setTimeout and setInterval.

How setTimeout works is this:

step 1. nothing to do
step 2. setTimeout schedules a piece of javascript to run at a later time
        Note that the javascript does not execute yet until setTimeout
        expires.
step 3. let the browser update the page
many, many loops of steps 1-3
step 2 (some time later).
        setTimeout expires and the piece of javascript executes
step 3. let the browser update the page

So, the get the effect you want, you need to do it like this:

function foo(){
  var i = 0;
  var update = function(){
    document.getElementById('myTag').innerHTML = i;
    i++;
    if (i<10000) {
      setTimeout(update,100);
    }
  };
  update();
}