Home/ Questions/Q 9147663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:03:01+00:00

I thought that script within $(document).ready(…) would always execute after the DOM is loaded.

  • 0

I thought that script within $(document).ready(…) would always execute after the DOM is loaded. Hence, it wouldn’t matter if a $(document.ready(…) went in the head or in the body. However, the code below does not generate “apples” on the screen like I want it to. If I locate the giveApples() function at the bottom of the page though, it works.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(giveApples());
function giveApples() {
    $("#appleTree").html("apples");
}
</script> 
</head>
<body>
<div id="appleTree"></div>
</body>
<script>
//$(document).ready(giveApples());
</script>
</html>

Can anyone please correct my misconceptions about DOM, page loading, Script-tag location, (document).ready(), or anything else that is causing this problem? I’m still quite new to web programming.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    And it does not. The problem is that you’re not passing giveApples as argument, but its returned value, since you are calling it (because of the ()). To make it work, don’t put the parenthesis:

    $(document).ready(giveApples);

    By your current code, the value that is being passed to $(document).ready is undefined, since giveApples doesn’t return any value.

    You could also do:

    $(document).ready(function(){
    giveApples();    //However, if you access the 'this' keyword inside the giveApples function, it will point to 'window', and not 'document'
});

    You can see what I explained above if you alert these two values:

    alert(giveApples);    //Shows the giveApples function body, properly
alert(giveApples());  //Shows undefined, since giveApples is being called and does not return any value

    Its the same when you use DOM events (onload, onclick, etc). You do this way:

    window.onload = myFunction;

    And not:

    window.onload = myFunction();
    • 0