未捕獲TypeError：無法讀取屬性'selectionStart'爲null

Question

我有一些預製javascript，與來自我的數據庫的罐頭響應的表單進行交互。當點擊插入按鈕沒有任何反應，雖然和鉻顯示錯誤：遺漏的類型錯誤：無法讀取空的特性「selectionStart」

這裏是JavaScript/PHP/HTML：

<tr><?php echo tep_draw_form('status', FILENAME_ORDERS, tep_get_all_get_params(array('action')) . 'action=update_order'); ?> 
     <td class="main"> 
      <script language="javascript"> 
        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 && 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(); 
         } 
        } 

       </script> 

           <select id="txtValor" /> 
           <option value="">Select Text</option> 
           <option value="<?php echo $order->customer['name']; ?>">Customer Name</option> 
           <option value="<?php echo STORE_NAME_ADDRESS; ?>">signature</option> 
           <option value="<?php echo STORE_NAME; ?>">Store Name</option> 
           <option value="<?php echo $_SERVER['SERVER_NAME']; ?>">Site</option> 
           <option value="<?php echo STORE_OWNER; ?>">Store Owner</option> 
           <option value="<?php echo STORE_OWNER_EMAIL_ADDRESS; ?>">Email the Store</option> 
           <?php 
           $get_premades_query = tep_db_query("select * from orders_premade_comments order by id"); 
           while($result = mysql_fetch_array($get_premades_query)) { 
           echo '<option value="'.$result["text"].'">'. $result["title"].'</option>'; 
           } 
           ?> 
           </select> 
           <input type="button" value="Insert at the cursor position" onclick="insereTexto()"/> 
           <input type="button" value="Clean" onclick="this.form.elements['comments'].value=''"> 
            <font class="smallText"><a href="premade_comments.php">[Setup]</a></font><br> 


     <?php echo tep_draw_textarea_field('comments', 'soft', '80', '10','','id="txt"'); ?></td> 
     </tr> 

我真不」噸知道很多的JavaScript，是PHP調用正確的數據庫字段，我可以正確迴應他們。但我猜測selectionStart功能沒有被正確使用？

Answer 1

的消息稱：

Cannot read property 'selectionStart' of null 

這是正確的：null沒有屬性，因此它不能有selectionStart。

那麼null從哪裏來？ .selectionStart要求的textarea：

    //beginning of the selection 
       var sel_start = textarea.selectionStart;    

和textarea來自於DOM：

//Paste into textarea 
    var textarea = document.getElementById("txt"); 

所以顯然getElementById()調用返回null，而不是東西。

你應該檢查HTML驗證那裏是一個textarea其ID爲txt。您還可以添加一個明確檢查的情況下，這只是發生間歇性：

//Paste into textarea 
    var textarea = document.getElementById("txt"); 
    if (!textarea) 
     alert("Och! No txt textarea defined?"); 

...當它發生時，檢查HTML源代碼驗證爲什麼會這樣。也許你並不總是顯示textarea的，也許是ID的變化等等

Answer 2

這裏是你的問題

var textarea = document.getElementById("txt"); 

是不是你的文檔中定義

• 另一個警告：使用不支持的html標記

  <font class="smallText"><a href="premade_comments.php">[Setup]</a></font>

  的<font>標籤沒有在HTML 5支撐，並且在HTML 4.01

• 這裏貶值是一個提示： 用於代碼可讀性PHP的短手回波符號。

  這<?php echo STORE_NAME_ADDRESS; ?>

  相同<?=STORE_NAME_ADDRESS ?>和它看起來的方式更好，當你進行多echo語句