Printing a value from javascript on a web page

Question

I have an html page and want to print some values from a java script function. The value needs to change often. My problem is that instead of changing "continuously" (or at least, when the code requires the value to change), it is changed only when the whole java script code has finished to execute. I am using Chrome, and haven't tested it on another browser.

Here is a minimal example reproducing the problem:

<head>
   <title>Test Continuous Output</title>
</head>

<body>
   <p id="data"></p>

   <script>
      function onClick() {
          for(var i =0;i<100;i++) {
              document.getElementById("data").innerHTML = i;
              for(var j = 0; j < 1000; j++) {
                    console.log("j="+j);
              }
          }
      }
   </script>
   <button onclick = "onClick()">test</button>
</body>

EDIT: posting here the code fixing this problem, using setTimeout under @Alytrem's suggestion:

<head>
   <title>Test Continuous Output</title>
</head>

<body>
  <p id="data"></p>

  <script>
    var n=0;
    function log() {
    document.getElementById("data").innerHTML = n;
    n=n+1;
    if(n<100) {
    setTimeout(log,100);
    }
    }

    function onClick() {
    log();
    }
  </script>
  <button onclick = "onClick()">test</button>
</body>

@DipeshParmar I just replaced in my code document.getElementById("data").innerHTML = i by document.write(i). The result is that nothing happens until the whole code has finished to execute, and then all the numbers are printed. In short, it is the same problem. — S4M, Apr 09 '13 at 12:21
http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop — Dipesh Parmar, Apr 09 '13 at 12:28

Alytrem · Accepted Answer · 2013-04-09T12:38:34.273

That is because the DOM will change but it need to be repainted. And the loop is already finished when the dom is repainted. Try to set a timeout to loop every 100ms for example. It will allow the DOM to be repainted.

This is a possible solution which use setTimeout to avoid blocking DOM repaint during computing.

http://jsfiddle.net/n4YYX/4/

<body>
<p id="data"></p>
<script>
    var remainingTasks;

    function doTask() {
        for (var j = 0; j < 1000; j++) {
            1 + 1;
        }
        console.log("remainingTasks=" + remainingTasks);
        document.getElementById("data").innerHTML = 100 - remainingTasks;
        remainingTasks--;
        if (remainingTasks > 0) setTimeout(doTask, 10);
    }

    function onClick() {
        remainingTasks = 100;
        doTask()
    }
</script>
<button onclick="onClick()">test</button>

Yes, I was able to fix it using setTimeout. Thanks! – S4M Apr 09 '13 at 12:34 — S4M, Apr 09 '13 at 12:34

score -1 · Answer 2 · answered Apr 09 '13 at 12:22

-1

Document.write or alert() are the only way i know to output a javascript variable value for debugging and stuff so, for example: alert("j= "+j); <-- better for detail debugging

or: document.write("<br/> j="+j); <-- Better for fast debugging

answered Apr 09 '13 at 12:22

Fabiotocchi

226
3
11

This is incorrect, you should use console.log to log out messages on your website (only in development. You should remove them for production). – Undefined Apr 09 '13 at 12:23
I don't wanna do a debugging, but show the user the progress of some work. And document.write isn't helping. – S4M Apr 09 '13 at 12:27
By the way, I discovered recently that it's possible to put a break point in some java script code by entering in the code: "debugger" (without the quotes). Maybe it can be useful to you. – S4M Apr 09 '13 at 12:41
I usually use browser debuggers, like the google chrome one. They already have a break point debugging system. Or for smaller stuff, i use alerts. Anyway, good to knwo – Fabiotocchi Apr 09 '13 at 12:44

Printing a value from javascript on a web page

2 Answers2