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

Question

All of my var statements uses identifiers:

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

So why am I getting a null error? I ran this code in the Javascript runner and got the null error message. And in my browsers Firefox and Chrome I don't get any errors or warnings. When I run the code in the browser and click the button to activate the event handler, the form clears. It's not going to a server anyway. It's just practice. I'm taking a course in javascript and Dynamic HTML. If anybody care to look at my code and tell me what I'm doing wrong I'd appreciate it. There's got to be something that I'm not getting right. Here is the script:

 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>

*" I ran this code in the javascript runner and got the null error message. And in my browsers Firefox and Chrome I don't get any errors or warnings."* That's confusing. Are you saying the code works in browsers? What is this "JavaScript runner" then? — Felix Kling, Nov 19 '15 at 04:45
Wait - what is `get.documentElementById`?!? Surely you mean the other way around, `document.getElementById`? — Amadan, Nov 19 '15 at 04:46
@JonathanLonowski: It is, in fact, [not a reserved word](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-reserved-words). — Amadan, Nov 19 '15 at 04:49
I'll add the HTML. It doesn't tell me what line the null error is on. At first I was using document.getElementById("text"); on some of my statements. When I saw the null error I went back and changed them all into var statements. — swydell, Nov 19 '15 at 04:52
check your HTML has elements with teh following ID's (case sensitive) `fname`, `lname`, `uname`, `email`, `password1`, `password2`, and `signin` — Jaromanda X, Nov 19 '15 at 04:56
oh that's an abomination of spacing! ... the convention is `attribute="value" atribute="value"` — Jaromanda X, Nov 19 '15 at 04:58
The javascript runner is: http://javascript.cs.lmu.edu/runner — swydell, Nov 19 '15 at 05:01
Well, you get the error on the JavaScript runner because that doesn't operate with a DOM. Since there are no elements with IDs for the runner, you get null values for any document.getElementById() call. — TAGraves, Nov 19 '15 at 05:03
I sure did get it backwards. I've been at it since this morning and I'm now beginning to make all kinds of typeos. I should back off for a while. — swydell, Nov 19 '15 at 05:05
I just ran this is squarefree.com/shell and it tells me that document.getElementById(...) is null on line 2. Okay, but why is it null. — swydell, Nov 19 '15 at 05:14
It's null because in the shell there is no element with that ID. document.getElementById returns null whenever it doesn't find a matching element. See my answer below. When you're testing out JavaScript that makes reference to the document, you need to do it using something that lets you put the HTML in as well. — TAGraves, Nov 19 '15 at 05:16

score 1 · Accepted Answer · answered Nov 19 '15 at 05:14

I cleaned up your code for you. There were several spots where you had errors (e.g., typing pass1.value instead of just pass1. This should work, but of course take time to study it to see what I changed and understand why. Here's a fiddle showing it working. Note that you should never expect this type of code to run in the "runners" that you've made reference to; the code here makes explicit reference to particular elements in the DOM, which the runners won't have. (Using a site like JSFiddle is better for this sort of thing, since you can put HTML into it as well).

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>

Thanks a lot. I'm going to study this code backward and forward. And by the way, I registered with JSFiddle. But I need to do check out a tutorial on it so that I can learn how to use it. — swydell, Nov 19 '15 at 05:19
I just went to JSFiddle and the code does work. Thanks for putting me up on the terrific site. I'll be using it a lotl — swydell, Nov 19 '15 at 05:22
Feel free to let me know if you have any questions about why I changed certain parts of your code. Happy to help! — TAGraves, Nov 19 '15 at 05:24
I do have a question. You use console.log(pass1, pass2). Is that a constructor. I recognize pass1 and pass2 as arguments. I like to know why you used it. And what is it's function in javascript. Is it like a new object. Or what. — swydell, Nov 19 '15 at 05:36
Woops! That was accidentally left in while I was debugging. See http://stackoverflow.com/questions/4539253/what-is-console-log for information about it - it's an immensely helpful tool for the developer. — TAGraves, Nov 19 '15 at 05:38

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

1 Answers1