TypeError: document.getElementById(...); is null in Javascript

Question

我所有的 var 语句都使用标识符：

 var identifier = document.getElementById("somename");

那么为什么我会收到空错误？我运行 Javascript 运行ner 中的此代码得到了空错误消息。在我的浏览器 Firefox 和 Chrome 中，我没有收到任何错误或警告。当我运行浏览器中的代码并单击按钮激活事件处理程序时，表单将被清除。无论如何，它不会去服务器。这只是练习。我正在学习 javascript 和动态 HTML 的课程。如果有人愿意查看我的代码并告诉我我做错了什么，我将不胜感激。一定有什么地方我没弄对。这是脚本：

 window.onload = function(){
 var fname = document.getElementById("fname").value;
 var lname = document.getElementById("lname").value;
 var loginName = document.getElementById("uname").value;

 var myEmail = document.getElementById("email").value;

 var pass1 = document.getElementById("password1").value;
 var pass2 = document.getElementById("password2").value;
 if(document.getElementById("uname").value == ""){
    return false;
    alert("Your user name can't be blank.");
  };

 if(pass1.value !== pass2.value){
    get.documentElementById("signin").value.disabled = true;
    return false;
    alert("Please retype your password.");
 }else if(pass1.value === pass2.value){
 alert("Welcome!");
 };
 };

HTML

 <body>
 <form action = "" name = "form" method = "Post">
 <label for="fname">First Name:</label><input type = "text" id =  "fname"required></input>

 <label for="lname">Last Name:</label><input type = "text" id = "lname"   required></input>

 <label for="uname">User Name:</label><input type = "text" id = "uname" required></input><br/>

 <label for="password1">Password:</label><input type = "password" id = "password1"required ></input><br/>

 <label for="password2">Verify Password:</label><input type = "password" id = "password2"required ></input><br/>

 <label for="email">Email Address:</label><input type = "email" id = "email" required></input><br/>

 <button type = "submit"id = "signin" onclick = "function()">Submit</button>
</form>
 <script src="signUp.js"></script>
 </body>

Answer 1

我为你清理了你的代码。有几个地方你有错误（例如，键入 pass1.value 而不是 pass1。这应该有效，但当然需要时间研究它以了解我更改了什么并理解为什么。Here's a fiddle showing it working. 请注意，您永远不应该期望这种类型的代码在您引用的 "runners" 中运行；此处的代码明确引用了 DOM 中的特定元素，运行用户不会有。（使用像 JSFiddle 这样的网站对这类事情更好，因为你也可以把 HTML 放进去）。

var submitForm = function () {
    var fname = document.getElementById("fname").value;
    var lname = document.getElementById("lname").value;
    var loginName = document.getElementById("uname").value;
    var myEmail = document.getElementById("email").value;
    var pass1 = document.getElementById("password1").value;
    var pass2 = document.getElementById("password2").value;
    console.log(pass1, pass2);
    if (document.getElementById("uname").value == "") {
        alert("Your user name can't be blank.");
        return false;
    }

    if (pass1 !== pass2) {
        document.getElementById("signin").value.disabled = true;
        alert("Please retype your password.");
        return false;
    } else if (pass1 === pass2) {
        alert("Welcome!");
    }
};

 <body>
 <form action="" name="form" method="POST">
 <label for="fname">First Name:</label><input type ="text" id = "fname" required></input>

 <label for="lname">Last Name:</label><input type = "text" id = "lname" required></input>

 <label for="uname">User Name:</label><input type ="text" id ="uname" required></input><br/>

 <label for="password1">Password:</label><input type="password" id="password1" required></input><br/>

 <label for="password2">Verify Password:</label><input type="password" id="password2" required ></input><br/>

 <label for="email">Email Address:</label><input type="email" id="email" required></input><br/>

 <button type="submit" id="signin" onclick="submitForm()">Submit</button>
</form>
</body>

TypeError: document.getElementById(...); is null in Javascript

TypeError: document.getElementById(...); is null in Javascript

javascript

document

mouseclick-event

dom-events