how to fix a document.body is null-error

javascript jquery null width

42,528

Solution 1

I agree with outis - we need some more code.

That said:

Are you sure you're doing all your work inside the $(document).ready function?
Do you definitely have a correctly formed (and closed) body tag and valid xhtml?
Does this happen on all browsers?

One suggestion:

Does the problem persist if you put the positioneerElement function in the $(document).ready function as well? I'm wondering whether the browser evaluates document.body prior to the document loading.

$(document).ready(function() {
    function positioneerElement(){      
    $breedte = (document.body.clientWidth - 1124) / 2;
    $('#bg_left').css({
        'width': $breedte
    });
    $('.container').css({
        'margin-left': $breedte
    });

    // your other code, including
    positioneerElement();
});

Solution 2

Make sure you only call $(window).width() after you have included the <body> tag (eg. in the ready callback), and/or use a Standards Mode doctype declaration. You should be doing that anyway: Quirks Mode sucks.

The issue is, to read the viewport size in Quirks Mode jQuery must look at document.body.clientWidth instead of document.documentElement.clientWidth. If you haven't started your <body> yet, there is not document.body node present.

Solution 3

You have to include jquery.js, and not jquery.min.js It looks like some bug in it This works for me

Solution 4

Well, just based on the information you have given me it might be that the body has not loaded properly yet. Please see here for more detials: http://www.coderanch.com/t/122834/HTML-JavaScript/document-body-null-or-not#606782

I would say more but I too agree with outis that you need to post some more code for us to debug.

View more solutions

42,528

Author by

Admin

Updated on March 30, 2020

Comments

Admin about 4 years
I'm having a document.body is null error in my javascript because I use:
```
$(window).width()
```
as value to assign to a variable in my
```
$(document).ready(function(){});
```
I would be very grateful to anyone who could help me with this.

Kind regards

edit: sorry if this all was unclear. I have a demo at: http://www.wpmonk.com/demo/hypowired at first the theme will load but then becomes white (because of the error) but when you reload you can see the whole theme because then he knows the value for $(window).width()

I'm using this code to center the layout (not possible with css because the left needs to have a width aswell.)
```
function positioneerElement(){      
    $breedte = (document.body.clientWidth - 1124) / 2;
    $('#bg_left').css({
        'width': $breedte
    });
    $('.container').css({
        'margin-left': $breedte
    });
}
```
I call function positioneerElement() in the load function.

Sorry if this wasn't clear I though it wasn't necessary to put the demo here for this nor the code. However I would like to thank the people who are trying to help!
Admin over 14 years

I added some more info, I'm doing this all in the ready functiones yes, my code should be valid xhtml & this happens in every browser
Admin over 14 years

thank you very much. Apperantly it all had to do with this. I found it strange because in other projects I didn't need to put the functions in my document.ready. Cheers