document.getElementbyId() returning null

Question

In the code at the line marked as //Error in comments. I get Javascript error saying: "Cannot read property style of 'null'". I have no idea what it is not able to find the object. I have thought and tried everything. Please help. Here is the code:

<script type="text/javascript">

    $.getJSON('https://graph.facebook.com/647045111?fields=first_name&<%= Session["Token"] %>',

    function (data) {
        $('#userName').html(data.first_name);
    });

    document.getElementById('connectedUnregistered').style.display = 'block'; //Error

</script>

    <div id="userName"></div>

    <div id="disconnected" style="display:block;">

     <div id="heading">Facebook login</div> 

     <a href="Account/FacebookLogin" id="loginButton"><div id="fbConnectButton"><img src="/Content/Images/fbconnect.png"/></div></a>    

    </div>

     <div id="connectedUnregistered" style="display:none">

     <div id="heading">Register Now</div> 



    </div>

score 34 · Accepted Answer · answered Aug 22 '11 at 18:36

You are executing your javascript code BEFORE the <div id="connectedUnregistered" /> was actually created.

Also note that you did not close your <div> with a corresponding </div>.

So move your javascript code to a part below your HTML. Or execute it after the page finished loading. If you are using JQuery you can do:

<script>

    $(document).ready(function() {

        ... your code ...

    });
</script>

score 4 · Answer 2 · answered Aug 22 '11 at 18:34

4

Put your script at the end of the HTML document instead of the beginning, and see if that solves things.

JavaScript can't edit the DOM element because it hasn't been created yet.

answered Aug 22 '11 at 18:34

Blazemonger

82,329
24
132
176

this is the acceptable answer for websites that can help their surfers use modern browsers. People targeting the open internet, with all kinds of browsers, must use the $(document).ready malarkey – Phlip Feb 15 '21 at 21:27

score 3 · Answer 3 · answered Aug 22 '11 at 18:35

3

Perhaps try placing this code in a

$(document).ready(function(){

//Code

});

block

answered Aug 22 '11 at 18:35

Fareesh Vijayarangam

4,938
4
20
18

score 1 · Answer 4 · answered Mar 07 '14 at 14:39

in my case it was because of having this line at the beginning of the jsp/html(whatever) file:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

removing it solved the problem for me(I do not remember what it was doing on my page at first place)

score 1 · Answer 5 · answered Aug 19 '15 at 14:26

1

Also, if in some part of the code you are using document.write it's very common to get null.

answered Aug 19 '15 at 14:26

Heitor Colangelo

446
6
15

score 0 · Answer 6 · answered Sep 20 '13 at 20:38

0

This error could also indicate that the element doesn't have an ID.

<input type="text" name="myelem" />

Make sure your element has an ID.

<input type="text" name="myelem" id="myelem" />

answered Sep 20 '13 at 20:38

live-love

34,372
16
163
152

score 0 · Answer 7 · answered Aug 22 '11 at 18:35

0

The script is trying to get the element before the element is loaded. Place the script after the element or put it in a load or ready event.

answered Aug 22 '11 at 18:35

FishBasketGordo

21,938
4
54
88

score 0 · Answer 8 · answered Aug 22 '11 at 18:35

0

The code executes prior to the element being created. Since you are using jquery, simply wrap it in document.ready:

$(function(){
    // code goes here
});

This will execute after the DOM is created.

answered Aug 22 '11 at 18:35

James Montagne

73,502
13
107
127

score 0 · Answer 9 · answered Aug 22 '11 at 18:35

0

The javascript code is running before the DOM is fully available and the call fails. Try the following instead

$(document).ready(function() {
  document.getElementById('connectedUnregistered').style.display = 'block'; //Error
}

answered Aug 22 '11 at 18:35

JaredPar

673,544
139
1,186
1,421

document.getElementbyId() returning null

9 Answers9

Linked