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 6 of 6

Thread: Div object null

  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div object null

    I'm having a problem with a simple script. I declare a function at the top of my page that will populate a div down the page. Immediately below is the div tag, and then below the div tag I call the function. I figure (wrongly, it seems) that having the div before the function call ensures that the function won't run before the div exists.

    Code:
    <script>
         function populateDiv(id) {
               var objDiv = document.getElementById(id);
               objDiv.innerHTML = "This is text for the div";
         }
    </script>
    
    <div id="myDiv" />
    
    <script>
         populateDiv("myDiv");
    </script>
    The code above generates a js error, saying that "objDiv" is null. So I added an attachEvent to call the function onLoad, instead:

    Code:
    <script>
         function populateDiv(id) {
               var objDiv = document.getElementById(id);
               objDiv.innerHTML = "This is text for the div";
         }
    
         window.attachEvent('onLoad', populateDiv('myDiv'))); 
    </script>
    
    <div id="myDiv" />
    But this still generates the same error; objDiv is null.

    Adding to my confusion, it works if I trigger the function call with a button instead:

    Code:
    <script>
         function populateDiv(id) {
               var objDiv = document.getElementById(id);
               objDiv.innerHTML = "This is text for the div";
         }
    </script>
    
    <input type="button" value="Click here to populate div" onClick="populateDiv('myDiv');">
    
    <div id="myDiv" />
    I don't want to have to trigger the function with any human action; I want it to run automatically when the page loads. I figure it's a timing thing; I could put in a time delay of some kind, but that seems like a hack. What can I do, and why is the code breaking in the first two instances?

    Thanks,
    CM

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,389
    Thanks
    13
    Thanked 353 Times in 349 Posts
    problem in box #1: when the <script> is executed, the <div> element is not yet closed. (<div/> only works in XHTML served as XHTML, which is not supported in IE)

    problem in box #2: the event is named "onload" (not sure if IE is case-insensitive here) and attachEvent() wants a function reference to be given, not the return value of the function (that means that the function runs before page load). use an anonymous function wrapper.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,441
    Thanks
    23
    Thanked 630 Times in 629 Posts
    Divs are not code like this:
    Code:
    <div id="myDiv" />
    They are coded like this:
    Code:
    <div id="myDiv"></div>
    Your first code box works. I have no problem with it.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Dormilich View Post
    (<div/> only works in XHTML served as XHTML, which is not supported in IE)
    It is supported in IE9+ but only when the page is really served as XHTML (it isn't supported in any browser where the page is served using the HTML MIME type)..

    The only reason it doesn't work in IE8 is that IE8 and earlier do not support XHTML - which is why so many people still serve their pages as HTML even though they have an XHTML doctype.
    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.

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dormilich View Post
    problem in box #1: when the <script> is executed, the <div> element is not yet closed. (<div/> only works in XHTML served as XHTML, which is not supported in IE)
    Ah, so that's why - I did discover that while experimenting with the code. Also (using IE8) that it wants the div to contain something; I just used an &nbsp;.

    Quote Originally Posted by Dormilich View Post
    problem in box #2: the event is named "onload" (not sure if IE is case-insensitive here) and attachEvent() wants a function reference to be given, not the return value of the function (that means that the function runs before page load). use an anonymous function wrapper.
    Ok, so the code should look like this?:

    Code:
    window.attachEvent('onload', function() {populateDiv('myDiv');});

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, I found that the attachEvent code in my post above does work.

    Now, I need to do what I'm really looking to do, which is use ajax in populateDiv(). Fun with browsers...

    Much thanks all.


  •  

    Posting Permissions

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