未捕获的TypeError：无法读取null的属性值[重复]答案

【问题标题】：Uncaught TypeError : Cannot Read property value of null [duplicate]未捕获的TypeError：无法读取null的属性值[重复]
【发布时间】：2014-11-02 02:50:03
【问题描述】：

我是 jQuery 新手，我正在尝试创建一个登录表单，当用户输入一个简短的用户名时，它会切换文本。所以这是我的代码，当我点击按钮时没有任何反应。我检查了控制台，它在我的代码中的特定行上显示了标题上的错误。我也检查了可能的拼写错误，但我没有看到任何错误。所以这是我的代码：

<!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>

【问题讨论】：

将该行也放入文档中

标签： javascript jquery typeerror

【解决方案1】：

将您的 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();
        });
    }
 });

【讨论】：

谢谢！这样就解决了。