Home/ Questions/Q 7850763
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T18:57:53+00:00

I have this example document: <html> <body> <script type=text/javascript> document.body.onload = myFunc(); function myFunc()

  • 0

I have this example document:

<html>
    <body>
        <script type="text/javascript">
            document.body.onload = myFunc();

            function myFunc() {
                element = document.getElementById('myDiv');
                element.innerHTML = 'Hello!';
            }
        </script>
        <div id="myDiv"></div>
    </body>
</html>

Why ‘element’ is null if myFunc is a callback of document.body.onload?

If, instead, the script is inserted after the div, it works:

<html>
    <body>
        <div id="myDiv"></div>
        <script type="text/javascript">
            document.body.onload = myFunc();

            function myFunc() {
                element = document.getElementById('myDiv');
                element.innerHTML = 'Hello!';
            }
        </script>
    </body>
</html>

My question is: if I use the onload event within the handler function, should I have the entire DOM, or not? Why should I not?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that you are calling the function immediately (and assign its return value).

    Assign the function instead and it will work:

    document.body.onload = myFunc;

    You should also use var element in your function to avoid creating a global variable.

    Or if you want to confuse people:

    document.body.onload = myFunc();
function myFunc() {
    return function() {
        var element = document.getElementById('myDiv');
        element.innerHTML = 'Hello!';
    };
}

    But let’s not do that. It makes no sense here. 😉

    • 0