title: Uncaught TypeError: Cannot read property 'selectionStart' of null
body: <p>I have some premade javascript, that interacts with a form for canned responses from my database. When clicking the insert button nothing happens though and chrome is showing the error: Uncaught TypeError: Cannot read property 'selectionStart' of null </p>
  
  <p>Here is the javascript/php/html: </p>
  
  <pre><code> &lt;tr&gt;&lt;?php echo tep_draw_form('status', FILENAME_ORDERS, tep_get_all_get_params(array('action')) . 'action=update_order'); ?&gt;
           &lt;td class="main"&gt;
              &lt;script language="javascript"&gt;  
                    function insereTexto(){  
                       //Paste into textarea
                       var textarea = document.getElementById("txt");  
  
                       //Text to be inserted  
                       var texto = document.getElementById("txtValor").value;  
  
                       //beginning of the selection 
                       var sel_start = textarea.selectionStart;              
  
                       //end of the selection  
                       var sel_end = textarea.selectionEnd;  
  
  
                       if (!isNaN(textarea.selectionStart))  
                       //Treatment for Mozilla
                       {  
                          var sel_start = textarea.selectionStart;  
                          var sel_end = textarea.selectionEnd;  
  
                          mozWrap(textarea, texto, '')  
                          textarea.selectionStart = sel_start + texto.length;  
                          textarea.selectionEnd = sel_end + texto.length;  
                       }     
  
                       else if (textarea.createTextRange &amp;&amp; textarea.caretPos)   
                       {  
                          if (baseHeight != textarea.caretPos.boundingHeight)   
                          {  
                             textarea.focus();  
                             storeCaret(textarea);  
                          }        
                          var caret_pos = textarea.caretPos;  
                          caret_pos.text = caret_pos.texto.charAt(caret_pos.texto.length - 1) == ' ' ? caret_pos.text + text + ' ' : caret_pos.text + text;  
  
                       }  
                       else //For those who can not enter, insert at the end of it (ie. ..)
                       {  
                          textarea.value = textarea.value + texto;  
                       }        
                    }  
  
                    /* 
                    This function opens the text of two strings and inserts the text at the cursor position well after he joins novamento text but the text entered
  This wonderful feature only works in Mozilla ... IE does not have the properties SelectionStart, textLength ...
                    */  
                    function mozWrap(txtarea, open, close)  
                    {  
                       var selLength = txtarea.textLength;  
                       var selStart = txtarea.selectionStart;  
                       var selEnd = txtarea.selectionEnd;  
                       var scrollTop = txtarea.scrollTop;  
  
                       if (selEnd == 1 || selEnd == 2)   
                       {  
                          selEnd = selLength;  
                       }  
                       //S1 has the text from the beginning to the cursor position 
                       var s1 = (txtarea.value).substring(0,selStart);  
  
                       //S2 has the selected text 
                       var s2 = (txtarea.value).substring(selStart, selEnd)  
  
                       //S3 has all the selected text  
                       var s3 = (txtarea.value).substring(selEnd, selLength);  
  
                       //Places the text in the textarea. Uses the string that was in the beginning, in the middle of the input string, then the selection string then the
                       //closing and finally what's left after the selection
                       txtarea.value = s1 + open + s2 + close + s3;           
                       txtarea.selectionStart = selEnd + open.length + close.length;  
                       txtarea.selectionEnd = txtarea.selectionStart;  
                       txtarea.focus();  
                       txtarea.scrollTop = scrollTop;  
                       return;  
                    }  
                    /* 
                    Insert at Caret position. Code from 
                     [url]http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130[/url] 
                    */  
                    function storeCaret(textEl)  
                    {  
                          if (textEl.createTextRange)  
                          {  
                             textEl.caretPos = document.selection.createRange().duplicate();  
                          }  
                    }  
  
                  &lt;/script&gt;  
  
                                  &lt;select id="txtValor" /&gt; 
                                  &lt;option value=""&gt;Select Text&lt;/option&gt;
                                  &lt;option value="&lt;?php echo $order-&gt;customer['name']; ?&gt;"&gt;Customer Name&lt;/option&gt;
                                  &lt;option value="&lt;?php echo STORE_NAME_ADDRESS; ?&gt;"&gt;signature&lt;/option&gt;
                                  &lt;option value="&lt;?php echo STORE_NAME; ?&gt;"&gt;Store Name&lt;/option&gt;
                                  &lt;option value="&lt;?php echo $_SERVER['SERVER_NAME']; ?&gt;"&gt;Site&lt;/option&gt;
                                  &lt;option value="&lt;?php echo STORE_OWNER; ?&gt;"&gt;Store Owner&lt;/option&gt;
                                  &lt;option value="&lt;?php echo STORE_OWNER_EMAIL_ADDRESS; ?&gt;"&gt;Email the Store&lt;/option&gt;
                                  &lt;?php
                                  $get_premades_query = tep_db_query("select * from orders_premade_comments order by id");
                                  while($result = mysql_fetch_array($get_premades_query)) {
                                  echo '&lt;option value="'.$result["text"].'"&gt;'. $result["title"].'&lt;/option&gt;';
                                  }
                                  ?&gt;
                                  &lt;/select&gt;
                                  &lt;input type="button" value="Insert at the cursor position" onclick="insereTexto()"/&gt;  
                                  &lt;input type="button" value="Clean" onclick="this.form.elements['comments'].value=''"&gt;
                                      &lt;font class="smallText"&gt;&lt;a href="premade_comments.php"&gt;[Setup]&lt;/a&gt;&lt;/font&gt;&lt;br&gt;
  
  
          &lt;?php echo tep_draw_textarea_field('comments', 'soft', '80', '10','','id="txt"'); ?&gt;&lt;/td&gt;
        &lt;/tr&gt;
  </code></pre>
  
  <p>I really don't know much javascript, THe php is calling the correct database fields and I can echo them correctly. But I a guessing selectionStart function is not being used correctly? </p>