2014-09-08 4 views
-1

jQuery를 처음 사용하고 있으며 사용자가 짧은 사용자 이름을 입력 할 때 텍스트를 토글하는 로그인 양식을 만들려고합니다. 그래서 여기에 내 코드가 있고 버튼을 클릭해도 아무 일도 일어나지 않습니다. 나는 콘솔을 점검하고 내 코드의 특정 줄에있는 제목의 오류를 말합니다. 나는 오타가 있는지 확인했지만 아무 것도 보지 못했습니다.잡히지 않은 TypeError : null의 속성 값을 읽을 수 없습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
    <script type="text/javascript" src = "jquery-2.1.1.min.js"></script> 
    <script type="text/javascript"> 
     var usr = document.getElementById("textbox1").value;//error is over this line. 
     if(usr.length<=6){ 
     $(document).ready(function(){ 
      $("#press").click(function(){ 
      $("#warning").toggle(); 
      }); 
     }); 
     } 
    </script> 
</head> 
<body> 
    <div id = "middleBlock"> 
      <form> 

       <p id = "username"> Username </p> 
       <p id = "password"> Password </p> 
       <input type="text" name="user" id="textbox1"> 
       <input type="password" name="pass" id="textbox2"> 
       <input type = "button" value = "LOG IN" id = "press">      
       <p id = "note"> Note: Use the username and password provided by your department. </p> 
       <div id = "warning" style = "display:none;padding:3%;">Username too short.</div> 
      </form> 
     </div> 
</body> 
+0

이 – juvian

답변

6
script body의 끝으로 이동하거나 DOM 준비 기능에 포장

: 그래서 여기 내 코드입니다. 페이지가 렌더링되기 전에 getElementById이 실행 중이므로 null 오류가 발생합니다.

예 :

$(document).ready(function(){ 
    var usr = document.getElementById("textbox1").value;//error is over this line. 
    if(usr.length<=6){ 
     $("#press").click(function(){ 
      $("#warning").toggle(); 
     }); 
    } 
}); 
+0

감사 준비 문서 내에서 해당 라인을 넣어! 그것으로 해결되었습니다. – ejandra

관련 문제