Javascript timing issue

Question

I'm new to javascript.I've created this code:

 <script>
  function text(){
  var testone=Math.floor(Math.random()*9);
  document.fgColor="green";
  document.bgColor="black";
  document.write(testone+" "+testone+"<br/>");
   }
  setInterval(text,100);
 </script>

There are numbers appearing in two columns, one under one.I would like to make numbers in second column appearing a little bit later.Any suggestions?

Check this answer for future reference http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — elclanrs, Jun 02 '13 at 21:43

score 0 · Accepted Answer · answered Jun 02 '13 at 22:07

Using the code the way you've written it, isn't going to work.

Instead, I recommend using css styling to accomplish what you want.

This is a general idea of how I would do it (give or take).

<script>
 // Code goes here
  var b = document.body;
  function text() {
    var testone=Math.floor(Math.random()*9);
    var d = document.createElement('div');
    d.innerHTML += '<span>' + testone + '</span>&nbsp';
    d.innerHTML += '<span style="display:none">' + testone + '</span>';

    setTimeout(function() {
      var childs = d.children;
      for(i = 0; i < childs.length; ++i) {
        childs[i].style.display = 'inline';        
      }      
    },500);

    b.appendChild(d);
  }

  setInterval(text,100);
</script>

NOTE for the above code to function properly, the script tag will have to execute inside the body tag (otherwise document.body will be null).

This plunkr shows the code in action.

http://plnkr.co/edit/JNJpaH2qEDwEl56C9YpU

I also took a few liberties, such as using a <div> instead of <br>, and I'm not worried about efficiency of reflowing dom every 1/2 second.

Javascript timing issue

1 Answers1