CODEWITHSUNDEEP
javascriptnullonload
Star Light
Star Light

Reputation: 174

Javascript onload isn't working ("Uncaught TypeError: Cannot set property 'document.body' of null ")

Here is my codes:

Javascript:

document.body.onload = function() {
    function UP() {//Ẩn hiện nút UP
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
}

HTML tag:

<button id="UP" onclick="toTop(350);"></button>

CSS style:

#UP {display: none;}

My idea is when I scroll down, then UP button will appear. But don't know why, it won't, it even return the error: "Uncaught TypeError: Cannot set property 'document.body' of null". Of couse, I did change other script like this:

function getReady() {
    UP();
}
function UP() {//Ẩn hiện nút UP
    if(window.pageYOffset > window.innerHeight)
        document.getElementById('UP').style.display = "block";
}

HTML tag:

<body onload="getReady();">
    <button id="UP" onclick="toTop(350);"></button>
</body>

It is even more terrible. When I load site, I didn't see onload attr of body tag and the browser didn't return any error for me.

Some other infomation: I develop on both side, Cr & FF, it all says a same problem. And I'm working on Wordpress source.

Upvotes: 4

Views: 22040

Answers (3)

Amitesh
Amitesh

Reputation: 1517

To answer your question "My idea is when I scroll down, then UP button will appear." i think you should register 'scroll' event on your scrollable container div. 'body/window.onload' function will be fired just once and hence it will not fullfill the requirement. Here is how you can proceed (working fiddle) 

<div id="container" onscroll="handleScroll(this)">
    <button id="UP" onclick="toTop(350);">Go to Top</button>
     Scroll me</br>....scrollable content

Javascript

function handleScroll (obj) {
    var displayVal = "block";
    if (obj.scrollTop == "0") {
        displayVal = "none";
    }
    document.getElementById('UP').style.display = displayVal;
};

Upvotes: 0

laruiss
laruiss

Reputation: 3816

There are a few problems with your code:

  • document.body.onload should be replaced by window.onload, as said in the comments
  • in the onload function, you define a function, but you don't invoke it...

So 

document.body.onload = function() {
    function UP() {//Ẩn hiện nút UP
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
}

Should be replaced by:

window.onload = function up() { // Could be anonymous, of course, but should not
    if(window.pageYOffset > window.innerHeight)
        document.getElementById('UP').style.display = "block";
}

Upvotes: 4

somethinghere
somethinghere

Reputation: 17350

Just to clarify @laruiss and explain what is going on, lets start with your code:

/* body.onload is not recommended, window.onload is. But thats not the main issue*/
window.onload = function() {
    /* You are declaring a function here. Very important: 
     * its a declaration, NOT a function call 
     */
    function UP() {
        if(window.pageYOffset > window.innerHeight)
            document.getElementById('UP').style.display = "block";
    }
    /* So if you want to execute ('call') your function, you have two options:
     * - Remove the declaration around your function aka `function UP(){` and the ending `}`
     * - Call the function here. To make your code work instantly, lets do that.
     */
    UP();
}

When using the onload event, you are actually doing the right thing. True, it's not recommended to actually do that in your DOM, but it should work. The biggest issue that DOM load is subjective. Some browsers will consider the body loaded as soon as the content is in, others will wait for images, and older IE versions won't fire it all! So if you use the recommended window.onload, you should be fine, as it will fire as soon as the DOM is ready. There is another great event for this you might want to consider, which is DOMContentLoaded, but its not as widely supported. Theres a bit more (by clicking through as well) here: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

I would also like to add that even though you put your button to display, its has no content so it could appear either empty or if you are resetting your button styles, not at all. Something to keep in mind.

Upvotes: 7

Related Questions