document.getElementbyId() returning null [duplicate]

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>

Answer 1

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>

Answer 2

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.