getElementById, innerHTML

DOM

Debug this code using firebug

Execute "GoDocWrite" code by clicking this paragraph. Ugh...

Execute "Go" code by clicking this paragraph.

Execute "ClearAll" code by clicking here.

The container div with id='out' is immediately below:



MARKUP and CODE
<html>
 <head>
   <script type="text/javascript"> 
   
      // clears div of random numbers
      function ClearAll()
      {
         document.getElementById("out").innerHTML = "";
      }   
      
      // fills div with random numbers
      function Go()
      {
         // storage
         var myNums = []; // simple array
         var i, s;
         
         // get the reference to the div that we will output into
         var o = document.getElementById("out");
         
         // fill array         
         for ( i=0; i<10; i++)
           myNums[i] = Math.floor( Math.random() *100); 
         
         // print array         
         for ( i=0; i<myNums.length; i++)
           o.innerHTML += myNums[i] +" ";
      }          
      
      // fills NEW DOCUMENT with random numbers
      function GoDocWrite()
      {
         var myNums = [];
         var i;
         
         // fill array         
         for ( i=0; i<10; i++ )
           myNums[i] = Math.floor( Math.random() *100);             
               
         // using "document.write()" CREATES a NEW DOCUMENT when executed after load      
         for ( i=0; i<myNums.length; i++)
           document.write("
" + myNums[i]); } </script> <style type="text/css"> #out { color:red; padding-left:50px; min-height:50px; } .highlight { background:#eee; padding:20px; } </style> </head> <body>

Debug this code using firebug

Execute "GoDocWrite" code by clicking this paragraph. Ugh...

Execute "Go" code by clicking this paragraph.

Execute "ClearAll" code by clicking here.

The container div with id='out' is immediately below:

</body> </html>