Javascript DOM `null`

Question

I have the following script in my head section:

 1| <script type="text/javascript">
 2| var inAccount = 0;
 3| if (inAccount = 0){
 4|   document.getElementById("L-out").style.display = 'block';
 5|   document.getElementById("User").style.display = 'block';
 6| }else{
 7|   document.getElementById("User").style.display = 'none';
 8|   document.getElementById("L-out").style.display = 'none';
 9| }
10| </script>

And the following code in my body section:

<div id="log">
<a href="#" class="in" id="Sign-up">Sign up</a>
<a href="#" class="in" id="L-in">Login</a>
<a href="#" class="in" id="User">Account</a>
<a href="#" class="in" id="L-out">Logout</a>
</div>

When I load the page I get this error message: 'null' is not an object. Referring to line 7.

Does any one know what might be happening?

`if (inAccount = 0)` should be with `==` or `===`. If you have your script in `head`, move it at the bottom of the page or add `onload` — Spokey, Jun 13 '13 at 12:57
are you sure your DOM is loaded when querying for the DOM Node? — lucassp, Jun 13 '13 at 12:57

Fabrizio Calderan loves trees · Answer 1 · 2013-06-13T13:04:53.213

3

The DOM elements referred in your script don't exist yet when the script is run (that's why the reference is null). To solve, just move that script on a window.load/domready event handler (or simply put that script as last child of the body element)

As a sidenote, the equality check should be made with ===

edited Jun 13 '13 at 13:04

answered Jun 13 '13 at 12:58

Fabrizio Calderan loves trees

109,094
24
154
160

Also worth pointing out @Spokeys comment, `if (inAccount = 0)` should contain `==` or `===` – tymeJV Jun 13 '13 at 12:58
So either place the script block below the HTML elements or react to the document load event. – ComFreek Jun 13 '13 at 12:59

Suresh Atta · Answer 2 · 2013-06-13T13:07:38.957

0

Dom is not ready.Wrap your code

window.onload = function(){ 
 if (inAccount == 0){
     document.getElementById("L-out").style.display = 'block';
     document.getElementById("User").style.display = 'block';
  }else{
     document.getElementById("User").style.display = 'none';
    document.getElementById("L-out").style.display = 'none';
   }
});

edited Jun 13 '13 at 13:07

answered Jun 13 '13 at 12:58

Suresh Atta

114,879
36
179
284

1

Where does `addEvent` come from? It's not a native method. – Felix Kling Jun 13 '13 at 12:59
I tried that, but I get the error: "undefined" is not a function. referring to the last line of code. – Nobel Chicken Jun 13 '13 at 13:00
@FelixKling Edited its onload event. – Suresh Atta Jun 13 '13 at 13:01
@CodeApprentice Updated check now – Suresh Atta Jun 13 '13 at 13:04

score 0 · Answer 3 · answered Jun 13 '13 at 12:59

Make sure <script> tags are at the bottom of your document [just above </body>] (for a couple of reasons):

Makes the page being rendered first priority (site appears faster to end-user).
The DOM objects will be created at that point, so JS will be able to locate the elements (like you're most likely having trouble with).

You can bind to document ready at the top, but I still am a firm believer of HTML first, JS second.

Also, when doing a compare in JavaScript, use == (or for a type-specific compare ===). You're using an assignment in your first if(...) statement.

score 0 · Answer 4 · answered Jun 13 '13 at 12:59

What's happening is your code is looking for elements that haven't actually loaded yet! What you can do to fix this is wrap your current if-else statement into a new function (function init() {...} for example), then in your body tag:

<body onload="init();">

Also, take care to use == or === in your if-statement.

score 0 · Accepted Answer · answered Jun 13 '13 at 13:07

0

use == when comparing variables in javascript

import jQuery in your page to make your js cross browser

$(document).ready(function(){
    var inAccount = 0;
    if (inAccount == 0){
        $("#User").show();
        $("#L-out").show();
    }else{
        $("#Sign-up").show();
        $("#L-in").show();
    }
});

here's fiddle: http://jsfiddle.net/5wER6/

answered Jun 13 '13 at 13:07

Nitin S

5,628
9
46
85

Thant fixes the error! – Nobel Chicken Jun 13 '13 at 13:29

Javascript DOM `null`

5 Answers5