Gmail body returning null with document.getElementById("")
<p>I have been tyring to open Gmail Compose and populate the "To", "Subject" and "Body". All goes well except the body shows null. Could someone take a look at this and see where I went wrong? The following is below the table/form</p>

<pre><code>function sendMail() {

var recipient = 'edb@ufec.com',
 subject = 'Typing Evaluation',
 message = document.getElementById('tStat');

window.open ('http://mail.google.com/mail/?view=cm&amp;fs=1'+
            '&amp;to=' + recipient +
            '&amp;su=' + subject +
            '&amp;body=' + message +
            '&amp;ui=2');
</code></pre>

<p>and the table/form I am getting the information from which is first after the </p>

<pre><code>&lt;div align="center"&gt;
&lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="border-bottom: 2px solid #354562; padding: 4px" class="titlec"&gt;
&lt;input disabled="" id="printB" onclick="sendMail(); return false" 
   type="button" value="Email Results" name="printB" 
   style="float: right; font-size: 8pt; font-family: Arial" /&gt;
&lt;input type="button" value="New Test" onclick="location.reload(true);" /&gt;
    &lt;center&gt;United Fire Typing Evaulation System&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;table border="0" cellpadding="0" 
       cellspacing="0" width="100%"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="border-bottom: 1px dotted #860E36; padding: 4px" 
 class="titlea" background="Images/Lt_Red_Back.gif" width="460"&gt;
 second time limit press the "End Test" button above. If you would like to re-evaluate,                     press the "New Test" button at the top of the page.&lt;/td&gt;
 &lt;td style="border-bottom: 1px dotted #860E36; padding: 4px" 
 class="titlea" background="Images/Lt_Red_Back.gif" width="190"&gt;
 &lt;p align="right"&gt;v1.0&lt;/p&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td style="padding: 4px" class="bodya" colspan="2"&gt;
 &lt;form name="JobOp"&gt;
 &lt;table border="0" cellpadding="5" width="100%"&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;table border="0" cellpadding="5" width="100%"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td align="center" 
     style="border-left: 1px solid #344270; border-right: 2px solid #344270; 
            border-top: 1px solid #344270; border-bottom: 2px solid #344270; 
            padding: 5px; background-color: #CED3E8" 
     background="Images/Blue_Back.gif"&gt;
   &lt;b&gt;&lt;font face="Arial" size="2" color="#FFFFFF"&gt;Net / 
   Gross WPM&lt;/font&gt;&lt;/b&gt;&lt;/td&gt;
   &lt;td align="center" 
      style="border-left: 1px solid #344270; 
             border-right: 2px solid #344270; border-top: 1px solid #344270; 
             border-bottom: 2px solid #344270; padding: 5px; 
             background-color: #CED3E8" 
      background="Images/Blue_Back.gif"&gt;
   &lt;b&gt;&lt;font face="Arial" size="2" color="#FFFFFF"&gt;Entry 
   Errors&lt;/font&gt;&lt;/b&gt;&lt;/td&gt;
   &lt;td align="center" 
       style="border-left: 1px solid #344270; border-right: 2px solid #344270; 
              border-top: 1px solid #344270; border-bottom: 2px solid #344270; 
              padding: 5px; background-color: #CED3E8" 
       background="Images/Blue_Back.gif"&gt;
   &lt;b&gt;&lt;font face="Arial" size="2" color="#FFFFFF"&gt;Accuracy&lt;/font&gt;&lt;/b&gt;&lt;/td&gt;
   &lt;td align="center" 
      style="border-left: 1px solid #344270; border-right: 2px solid #344270;
             border-top: 1px solid #344270; border-bottom: 2px solid #344270;
             padding: 5px; background-color: #CED3E8" 
      background="Images/Blue_Back.gif"&gt;
   &lt;b&gt;&lt;font face="Arial" size="2" color="#FFFFFF"&gt;Elapsed 
   / Remaining&lt;/font&gt;&lt;/b&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td align="center"&gt;&lt;font size="2" face="Arial"&gt;
   &lt;div id="stat_wpm"&gt;
    Not Started&lt;/div&gt;
   &lt;/font&gt;&lt;/td&gt;
   &lt;td style="border-left: 1px dotted #8794C7; border-right: 1px dotted #8794C7; 
              border-top-width: 1px; border-bottom-width: 1px" align="center"&gt;
   &lt;font size="2" face="Arial"&gt;
   &lt;div id="stat_errors"&gt;
    Waiting...&lt;/div&gt;
   &lt;/font&gt;&lt;/td&gt;
   &lt;td style="border-left-width: 1px; border-right: 1px dotted #8794C7; 
              border-top-width: 1px; border-bottom-width: 1px" align="center"&gt;
   &lt;font size="2" face="Arial"&gt;
   &lt;div id="stat_score"&gt;
    Waiting...&lt;/div&gt;
   &lt;/font&gt;&lt;/td&gt;
   &lt;td align="center"&gt;&lt;font size="2" face="Arial"&gt;
   &lt;div id="stat_timeleft"&gt;
    0:00&lt;/div&gt;
   &lt;/font&gt;&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
 &lt;td style="border-left-width: 1px; border-right-width: 1px; 
            border-top: 1px solid #344270; border-bottom-width: 1px"&gt;
 &lt;div id="expectedArea" style="display:block"&gt;
  &lt;p style="margin-top: 0; margin-bottom: 0"&gt;
  &lt;font color="#7A88C0" face="Arial" size="1"&gt;
  &lt;textarea name="given" cols="53" rows="10" 
    wrap="on" onfocus="deterCPProtect();" 
    style="width: 100%; border: 1px solid #344270; padding: 2px; 
           font-family:Arial; font-size:9pt"&gt;
    Click on the button below to start the typing test. 
    What you will be expected to type will appear here.
  &lt;/textarea&gt;&lt;/font&gt;
  &lt;/p&gt;
 &lt;/div&gt;
 &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
 &lt;td&gt;
 &lt;p align="center" style="margin-top: 0; margin-bottom: 2px"&gt;
 &lt;input type="button" 
    value="&amp;gt;&amp;gt; Start Typing Test &amp;lt;&amp;lt;" name="start" 
    onclick="beginTest()" 
    style="display:block; border-left:1px solid #293358; border-right:2px 
       solid #293358; border-top:1px solid #293358; border-bottom:2px solid #293358; 
       width: 100%; background-color: #9BB892; color:#FFFFFF; 
       background-image:url('Images/Green_Back.gif')" /&gt;&lt;/p&gt;
 &lt;p align="center" style="margin-top: 0; margin-bottom: 0"&gt;
 &lt;input disabled="" type="button" 
   value="&amp;gt;&amp;gt; End Typing Test &amp;lt;&amp;lt;" 
   name="stop" onclick="endTest()" 
   style="display:none; border-left:1px solid #293358; border-right:2px 
            solid #293358; border-top:1px solid #293358; border-bottom:2px 
            solid #293358; width: 100%; background-color: #F05959; 
            color:#FFFFFF; background-image:url('Images/Red_Back.gif')" /&gt;&lt;/p&gt;
 &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
 &lt;td style="font-family: Arial; font-size: 9pt"&gt;
 &lt;div id="typeArea" style="display:block"&gt;
  &lt;table border="0" width="100%" cellspacing="1"&gt;
   &lt;tbody&gt;
   &lt;tr&gt;
    &lt;td style="border: 1px solid #9CA8D1; background-color: #EAECF4"&gt;
    &lt;div align="left"&gt;
     &lt;table id="stProg" border="0" 
                 width="0%" cellspacing="1"&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td style="border: 1px solid #344270; background-color: #8F9BCB; 
                   font-family:Arial; font-size:8pt; color:#FFFFFF"
                   align="right" background="Images/Blue_Back.gif"&gt;

          &lt;div id="thisProg"&gt;0%&lt;/div&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
     &lt;/tbody&gt;
     &lt;/table&gt;
    &lt;/div&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;p style="margin-top: 0; margin-bottom: 0"&gt;
  &lt;font color="#7A88C0" face="Arial" size="1"&gt;
  &lt;textarea onkeypress="doCheck();" onkeydown="//calcStat()" 
     name="typed" cols="53" rows="10" wrap="on" 
     style="width: 100%; border: 1px solid #344270; padding: 2px; font-family:Arial; 
             font-size:9pt"&gt;&lt;/textarea&gt;&lt;/font&gt;
  &lt;/p&gt;
 &lt;/div&gt;
 &lt;div id="afterAction" style="display:none"&gt;
 &lt;/div&gt;
 &lt;/td&gt;
&lt;/tr&gt;
</code></pre>
