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"
".dtd">
<html>
<head>
<script src=".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.
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/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery./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 Improve this question edited Jan 12, 2013 at 0:53 Danilo Valente 11.4k8 gold badges54 silver badges70 bronze badges asked Jan 12, 2013 at 0:10 user1971506user1971506 2,3555 gold badges20 silver badges19 bronze badges 1-
2
You are not applying
ready()correctly. You need to feed it afunction()inside which you callgiveApples(). – Pekka Commented Jan 12, 2013 at 0:12
5 Answers
Reset to default 13That's because you're not actually binding an event handler to the ready event. You're calling giveApples right away and passing its return value (undefined) as event handler to bind (which silently fails). You need to pass the function to .ready(), not call it!
$(document).ready(giveApples);
Note the missing parentheses.
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();
You're missing a function
With this syntax:
$(document).ready(giveApples());
you are passing the result of giveApples as the code to be executed at document ready. Also, at the time it is called, this function isn't declared yet.
Correct syntax
This would work:
$(document).ready(function() {
giveApples();
});
As would:
$(document).ready(giveApples);
To answer your titular question since others have identified the source of your problem with the code which is not related to the position of document.ready()...
It doesn't really matter. It is just a standard convention that a lot of people follow.
A lot of people are also proponents of putting the <script> tag as the last element in the <body> tag also.
Proof: See? It's controversial. I even got a downvote. =)
You can put the srcipt wherever you want to put it.The html will execute from up to down.Yes,$(document).ready(...) would always execute after the DOM is loaded.But in your code,you have put the Function outside the $(document).ready.That means it will execute when DOM is loading.Maybe you can do like this:$(document).ready(function giveApples(){$("#appleTree").html("apples");}). If you want to learn JQuery,I will give you a link and I am new,too.It's very amazing.So have fun.
30-days-to-learn-jquery
w3school