Javascript：Uncaught TypeError：無法讀取未定義的屬性「長度」

我寫了一個腳本來驗證通過表單提交的用戶名。如果用戶名稱大於5個字符，則應向用戶顯示一些消息。我得到的錯誤是Javascript：Uncaught TypeError：無法讀取未定義的屬性「長度」

:Uncaught TypeError: Cannot read property 'length' of undefined at checkusername (eventobject.html:24) at HTMLInputElement. (eventobject.html:18)

我已經使用'模糊'事件。

代碼：

<html> 

<head> 
</head> 

<body> 

    <form> 
    <label for="text">Username:</label> 
    <input type="text" id="text" /> 
    <p id="para"></p> 

    </form> 

    <script> 
    var el=document.getElementById("text"); 
    el.addEventListener('blur',function(){checkusername(5);},false); 

    var msg=document.getElementById("para"); 

    function checkusername(min) 
    { 
    if(this.value.length<min) 
    { 
     msg.textContent="username less than 5 characters"; 
    } 
    else 
    { 
     msg.textContent=''; 
    } 
    } 

    </script> 
</body> 


</html>

上面的代碼工作正常，當我寫不帶參數相同的事件處理程序。用於事件處理，而不傳遞參數的代碼如下所示：

<html> 

<head> 
</head> 

<body> 

    <form> 
    <label for="text">Username:</label> 
    <input type="text" id="text" /> 
    <p id="para"></p> 

    </form> 

    <script> 
    var el=document.getElementById("text"); 

    el.addEventListener('blur',checkusername,false); 

    var msg=document.getElementById("para"); 

    function checkusername() 
    { 
    if(this.value.length<5) 
    { 
     msg.textContent="username less than 5 characters"; 
    } 
    else 
    { 
     msg.textContent=''; 
    } 
    } 

    </script> 
</body> 


</html>

來源

2017-07-16 Imran pasha

可以使用Function.prototype.bind()設置this在第一參數和參數要在第二至第N參數傳遞函數體內用於.bind()

el.addEventListener('blur',checkusername.bind(el, 5 /*, N */),false);

來源

2017-07-16 07:42:50 guest271314

我用的是您在上面建議的事件調用方法。但仍然存在相同的問題。這裏是綁定方法的完整代碼。請看看代碼，並指出我是否有任何錯誤。 'el.addEventListener（'blur'，checkusername.bind（el，5），false）; var msg = document.getElementById（「para」）; 函數checkusername（el，min） { if（el.value.length

你可以試試這個。我希望它會起作用。

<html> 
<body> 
<form> 
    <label for="text">Username:</label> 
    <input type="text" id="text" /> 
    <p id="para"></p> 
</form> 

<script> 
    var el=document.getElementById("text"); 
    el.addEventListener('blur',function(){checkusername(5);},false); 

    var msg=document.getElementById("para"); 

    function checkusername(min) 
    { 
     this.value = []; 
     if(this.value.length<min) 
     { 
      msg.textContent="username less than 5 characters"; 
     } 
     else 
     { 
      msg.textContent=''; 
     } 
    } 

</script>  
</body>  
</html>

來源

2017-07-16 08:13:34

'this.value = [];如果（this.value.length

在對事件的調用方式進行了一些研究之後，我遇到了上述問題的兩種解決方案。再次看一看錯誤消息： -

:Uncaught TypeError: Cannot read property **'length'** of undefined at **checkusername**

正是從這一錯誤在checkusername（）函數中出現的上述消息明確。並且實際的錯誤發生是因爲長度應用於未定義的變量，在此情況下，此。

其原因爲何此在此事件呼叫是未定義：

1.In普通函數調用（如下面所示），這被與在其上調用函數的事件相關聯的關鍵字。

el.addEventListener('blur',checkusername(),false); //call without parameters

在這裏，事件被調用函數checkusername（） directly.In短，這被保持參照EL即..，這 - > EL。在這種事件調用，它是有意義的使用長度財產這，因爲它是持有的東西。

2.在涉及傳遞參數（問題中的問題）的函數調用中，按照JavaScript標準不支持常規函數調用。的JavaScript定義了函數調用需要嵌入一個匿名函數內（如下所示）：

el.addEventListener('blur',function(){checkusername(5);},false); //call with parameters.

在這裏，事件被調用匿名函數和，後者又調用checkusername（）。因此，這並不是指什麼，不確定。因此，呼籲這個內checkusername返回錯誤長度。

因爲，這個不能使用，所以使用下面的技術。

方法1：：通過el作爲參數列表的一部分。

var el=document.getElementById("text"); 
el.addEventListener('blur',function(){checkusername(el,5);},false); 

var msg=document.getElementById("para"); 

function checkusername(el,min) 
{ 

    if(el.value.length<min) 
    { 
     msg.textContent="username less than 5 characters"; 
    } 
    else 
    { 
     msg.textContent=''; 
    } 
}

方法2：聲明EL全局。

var el=document.getElementById("text"); 
    el.addEventListener('blur',function(){checkusername(5);},false); 

    var msg=document.getElementById("para"); 

    function checkusername(min) 
    { 

     if(el.value.length<min) 
     { 
      msg.textContent="username less than 5 characters"; 
     } 
     else 
     { 
      msg.textContent=''; 
     } 
    }

由Jon達科特在&的Javascript JQuery的書找到這些解決方案。。 useful link

希望這是有幫助的。 :)我的第一個答案在stackoverflow。

來源

2017-07-18 09:51:25

試試這個 -

<!DOCTYPE html> 
    <html> 
     <body> 
     <form> 
      <label for="inputText">Username:</label> 
      <input type="text" id="inputText" /> 
      <p id="message"></p> 
     </form> 

     <script> 
      var el=document.getElementById("inputText"); 
      el.addEventListener('blur',function(){checkusername(5);},false); 

      var msg=document.getElementById("message"); 

      function checkusername (min) { 
       if(this.el.value !== (undefined || null) && this.el.value.length < min) { 
        msg.textContent="username less than 5 characters"; 
       } else { 
        msg.textContent=''; 
       } 
      } 

     </script>  
    </body>  
</html>

來源

2017-07-18 12:18:45

Javascript：Uncaught TypeError：無法讀取未定義的屬性「長度」

回答

相關問題