title: getElementById doesn't work at all
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="form1"&gt;
      Title: &lt;input type="text" id="title1" size="25"/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
      Description &lt;input type="text" id="desc1" size="55"/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
      &lt;input type="submit" value="Submit" onclick="doit();"/&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  function doit(){
      var title = document.getElementById("title1").value;
      var description = document.getElementById("desc1").value;
  
      document.write("&lt;h3&gt;Title: " + title + "&lt;/h3&gt;");
      document.write("&lt;h3&gt;Description: " + description + "&lt;/h3&gt;");
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need help with <code>getElementById</code>. My script takes the values the user typed in textboxes and when the user clicks submit the values are written to the page using <code>document.write</code>, however the code doesn't work as it expected.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function doit() {
      document.write("Do it function");
      var title = document.getElementById("title1").value;
      var description = document.getElementById("desc1").value;
  
      document.write("&lt;h3&gt;Title: " + title + "&lt;/h3&gt;");
      document.write("&lt;h3&gt;Description: " + description + "&lt;/h3&gt;");
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The execution doesn't even reach the first line of the function. In the button I have:</p>
  
  <pre><code>&lt;input type="submit value="submit" onclick="doit();"/&gt;
  </code></pre>