title: JavaScript and Document.Writeln() method
body: <p>I am a newcomer on JavaScript and now I'm doing some practices by myself. One of the practices is to get the value from a textbox and then write it down on an Alert window, or on a HTML page using <code>Document.writeln()</code>. But then, I notice some strange problem. When I try to run this javascript:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset = "utf-8"&gt;
          &lt;title&gt;HTML Practice&lt;/title&gt;
          &lt;script type="text/javascript" &gt;
              function testing(){
  
                  window.alert("testing");
                  document.writeln("test");
                  document.writeln("test");
                  document.writeln("test");
                  document.writeln("test");
                  window.alert(document.getElementById('test0').value);
                  window.alert(document.getElementById('test2').value);
              }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;label&gt;TextBox&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="test0" value="12" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;label&gt;Another TextBox&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="test2" value="3" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="button" id="button" value="Click here!" onclick="testing()" /&gt;&lt;/td&gt;
                  &lt;td&gt;Click this button to read the text in textbox&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The alert window appear, but the last two alert window doesn't appear.
  Strangely, when I move two bottom line on javascript to the top like this</p>
  
  <pre><code>window.alert(document.getElementById('test0').value); //this code is now on top
  window.alert(document.getElementById('test2').value);    
  window.alert("testing");
  document.writeln("test");
  document.writeln("test");
  document.writeln("test");
  document.writeln("test");
  </code></pre>
  
  <p>Those two alert window appear. There is also another problem. I try some variation to track this problem:</p>
  
  <pre><code>document.writeln(document.getElementById('test0').value);
  document.writeln(document.getElementById('test2').value);    
  window.alert("testing");
  document.writeln("test");
  document.writeln("test");
  document.writeln("test");
  document.writeln("test");
  </code></pre>
  
  <p><code>test0</code> and <code>test2</code> are IDs of my two textbox. when the value of <code>test0</code> and <code>test2</code> are 12 and 3, respectively, no alert window appear and this is what appears on the HTML page:</p>
  
  <pre><code>12
  </code></pre>
  
  <p>But when I put those two top line on the bottom like this:</p>
  
  <pre><code>window.alert("testing");
  document.writeln("test");
  document.writeln("test");
  document.writeln("test");
  document.writeln("test");
  document.writeln(document.getElementById('test0').value);
  document.writeln(document.getElementById('test2').value); //Now on the bottom
  </code></pre>
  
  <p>Using same textbox value above, the alert window appears and this is what appears on the HTML page</p>
  
  <pre><code>test test test test
  </code></pre>
  
  <p>What I expected is the output should be like this:</p>
  
  <pre><code>test
  test
  test
  test
  12
  3
  </code></pre>
  
  <p>Now I'm curious, why when I only change the position of the line, the output is very different? Is there something wrong on my usage of <code>Document.Writeln()</code>?</p>