title: Printing a value from javascript on a web page
body: <p>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.</p>
  
  <p>Here is a minimal example reproducing the problem:</p>
  
  <pre><code>&lt;head&gt;
     &lt;title&gt;Test Continuous Output&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;p id="data"&gt;&lt;/p&gt;
  
     &lt;script&gt;
        function onClick() {
            for(var i =0;i&lt;100;i++) {
                document.getElementById("data").innerHTML = i;
                for(var j = 0; j &lt; 1000; j++) {
                      console.log("j="+j);
                }
            }
        }
     &lt;/script&gt;
     &lt;button onclick = "onClick()"&gt;test&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>EDIT: posting here the code fixing this problem, using setTimeout under @Alytrem's suggestion:</p>
  
  <pre><code>&lt;head&gt;
     &lt;title&gt;Test Continuous Output&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;p id="data"&gt;&lt;/p&gt;
  
    &lt;script&gt;
      var n=0;
      function log() {
      document.getElementById("data").innerHTML = n;
      n=n+1;
      if(n&lt;100) {
      setTimeout(log,100);
      }
      }
  
      function onClick() {
      log();
      }
    &lt;/script&gt;
    &lt;button onclick = "onClick()"&gt;test&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>