Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts

    Question Why Error console tells me :exp is null?

    Hello,

    Error Console tells me : exp is null Line 10

    This does not make any sense to me. Could someone look at the short script below and tell me why I get this message?

    I know how to make this script work, but I just want to understand why function changePar cannot access the variable exp in the script below.
    Thank you very much.

    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Exercise 2</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

    <script type="text/javascript">
    exp=document.getElementById("experiment");

    function changePar() {
    exp.getElementsByTagName("button")[0].onclick=function() {
    document.getElementById("changingParagraph").innerHTML="Hello World";
    }
    }
    window.onload=changePar;
    </script>

    </head>

    <body>

    <div id="experiment">
    <button>Click Here</button>
    </div>

    <p id="changingParagraph"></p>
    </body>
    </html>


    </code>
    Last edited by chickentulip; 01-16-2012 at 05:11 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Because the element you are trying to access doesn't exist until after the page loads.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Because the element you are trying to access doesn't exist until after the page loads.
    I know, when I define the function , the variable does not exist.

    But when I call the function with <code>window.onload</code>, it does.

    Does it mean, that when I define the function, all variables that I use inside it, should already exist?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Kind of right. Your variable is declared as a global. Javascript will try to get that element before the page is finished loading. It will fail because it doesn't exist until the DOM is completed loaded so yes if you plan on getting elements from the DOM you need to wait until the page is fully loaded until you try to access them.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    chickentulip (01-16-2012)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Change to this:-


    Code:
    <script type="text/javascript">
    
    function changePar() {
    var exp=document.getElementById("experiment");

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    chickentulip (01-16-2012)

  • #6
    New Coder
    Join Date
    Oct 2010
    Location
    Toronto
    Posts
    95
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Thank you!

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,633
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Just to clarify what your problem was.

    When you ran the statement:

    Code:
    exp=document.getElementById("experiment");
    it set exp to null because that id didn't exist in the page at that time.

    That's one of the many reasons why you should put your JavaScript immediately before the </body> tag so that the HTML loads first and all the ids will therefore exist when you try to reference them.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    chickentulip (01-17-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •