Gmail body returning null with document.getElementById(“”)

Question

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

function sendMail() {

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

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

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

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="border-bottom: 2px solid #354562; padding: 4px" class="titlec">
<input disabled="" id="printB" onclick="sendMail(); return false" 
   type="button" value="Email Results" name="printB" 
   style="float: right; font-size: 8pt; font-family: Arial" />
<input type="button" value="New Test" onclick="location.reload(true);" />
    <center>United Fire Typing Evaulation System</center></td>
</tr>
</tbody>
</table>
</div>
<table border="0" cellpadding="0" 
       cellspacing="0" width="100%">
<tbody>
<tr>
<td style="border-bottom: 1px dotted #860E36; padding: 4px" 
 class="titlea" background="Images/Lt_Red_Back.gif" width="460">
 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.</td>
 <td style="border-bottom: 1px dotted #860E36; padding: 4px" 
 class="titlea" background="Images/Lt_Red_Back.gif" width="190">
 <p align="right">v1.0</p>
 </td>
 </tr>
 <tr>
 <td style="padding: 4px" class="bodya" colspan="2">
 <form name="JobOp">
 <table border="0" cellpadding="5" width="100%">
 <tbody>
 <tr>
 <td>
 <table border="0" cellpadding="5" width="100%">
  <tbody>
  <tr>
   <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">
   <b><font face="Arial" size="2" color="#FFFFFF">Net / 
   Gross WPM</font></b></td>
   <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">
   <b><font face="Arial" size="2" color="#FFFFFF">Entry 
   Errors</font></b></td>
   <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">
   <b><font face="Arial" size="2" color="#FFFFFF">Accuracy</font></b></td>
   <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">
   <b><font face="Arial" size="2" color="#FFFFFF">Elapsed 
   / Remaining</font></b></td>
  </tr>
  <tr>
   <td align="center"><font size="2" face="Arial">
   <div id="stat_wpm">
    Not Started</div>
   </font></td>
   <td style="border-left: 1px dotted #8794C7; border-right: 1px dotted #8794C7; 
              border-top-width: 1px; border-bottom-width: 1px" align="center">
   <font size="2" face="Arial">
   <div id="stat_errors">
    Waiting...</div>
   </font></td>
   <td style="border-left-width: 1px; border-right: 1px dotted #8794C7; 
              border-top-width: 1px; border-bottom-width: 1px" align="center">
   <font size="2" face="Arial">
   <div id="stat_score">
    Waiting...</div>
   </font></td>
   <td align="center"><font size="2" face="Arial">
   <div id="stat_timeleft">
    0:00</div>
   </font></td>
  </tr>
 </tbody>
 </table>
 </td>
</tr>
<tr>
 <td style="border-left-width: 1px; border-right-width: 1px; 
            border-top: 1px solid #344270; border-bottom-width: 1px">
 <div id="expectedArea" style="display:block">
  <p style="margin-top: 0; margin-bottom: 0">
  <font color="#7A88C0" face="Arial" size="1">
  <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">
    Click on the button below to start the typing test. 
    What you will be expected to type will appear here.
  </textarea></font>
  </p>
 </div>
 </td>
</tr>
<tr>
 <td>
 <p align="center" style="margin-top: 0; margin-bottom: 2px">
 <input type="button" 
    value="&gt;&gt; Start Typing Test &lt;&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')" /></p>
 <p align="center" style="margin-top: 0; margin-bottom: 0">
 <input disabled="" type="button" 
   value="&gt;&gt; End Typing Test &lt;&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')" /></p>
 </td>
</tr>
<tr>
 <td style="font-family: Arial; font-size: 9pt">
 <div id="typeArea" style="display:block">
  <table border="0" width="100%" cellspacing="1">
   <tbody>
   <tr>
    <td style="border: 1px solid #9CA8D1; background-color: #EAECF4">
    <div align="left">
     <table id="stProg" border="0" 
                 width="0%" cellspacing="1">
      <tbody>
      <tr>
       <td style="border: 1px solid #344270; background-color: #8F9BCB; 
                   font-family:Arial; font-size:8pt; color:#FFFFFF"
                   align="right" background="Images/Blue_Back.gif">

          <div id="thisProg">0%</div>
       </td>
      </tr>
     </tbody>
     </table>
    </div>
    </td>
   </tr>
  </tbody>
  </table>
  <p style="margin-top: 0; margin-bottom: 0">
  <font color="#7A88C0" face="Arial" size="1">
  <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"></textarea></font>
  </p>
 </div>
 <div id="afterAction" style="display:none">
 </div>
 </td>
</tr>

Answer 1

You probably want something like

document.getElementById('tStat').innerHTML
                                ^^^^^^^^^^

...otherwise you're referencing an element, not its text. That said, I don't see any elements with that id in your HTML.

Answer 2

First of all, I checked, and the URL you are using for gmail is sound.

After a quick look, your message variable cannot be returning a value. You can do a quick check by using the script and checking the final URL in gmail (see if there is anything within the 'body' variable).

First of all, you need your message variable to get the value of your body textarea (or whichever html tag it's in, you have a lot of html in your question and I couldn't see which tag contains your message after a quick scan). So change:

message = document.getElementById('tStat');

to either

message = document.getElementById('tStat').innerHTML;

or

message = document.getElementById('tStat').value;

Depending on which type of html tag it is in.

I hope this helps.