CODEWITHSUNDEEP
javascripthtmldom
Mr. Busy
Mr. Busy

Reputation: 33

Javascript window.onload Not Waiting for DOM to Load

I am somewhat new to programming and have been working through the Head First HTML5 Programming book. On page 65, they have an exercise that helps you insert a javascript function into the HTML head that will change the text located at bullet points in the body of the page. When I open the HTML file in the browser, the page loads, but the content from the Javascript function isn't added to the bullet points. I have determined it's because the script is running before the DOM is complete because when I change the book's code to <body onload="addSongs()">, the page loads correctly.

Here's the code from the book (that doesn't seem to work):

<!doctype html>
<html>
<head>
<title>My Playlist</title>
<meta charset="utf-8">
<script>
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");

song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";

window.onload = addSongs;
}
</script>
</head>
<body>
<h1> My Awesome Playlist! </h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
</body>
</html>

I have read through different posts and many people suggested using JQuery (which I'm hoping to learn in the next few months), but I'm just curious as to whether the window.onload = function; has been deprecated since this book was published or if I am making a mistake somewhere. A lot of the exercises in this book use this principle and I can't move forward until I figure this out. Any suggestions or different approaches are appreciated.

Thanks!

Upvotes: 0

Views: 2154

Answers (3)

Hazem
Hazem

Reputation: 107

You need to move window.onload = addSongs; after define the function, not before it. like this:

<!doctype html>
<html>
<head>
<title>My Playlist</title>
<meta charset="utf-8">
<script>
function addSongs() {
    var song1 = document.getElementById("song1");
    var song2 = document.getElementById("song2");
    var song3 = document.getElementById("song3");

    song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
    song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
    song3.innerHTML = "I Code the Line, by Johnny Javascript";
}
window.onload = addSongs;

</script>
</head>
<body>
<h1> My Awesome Playlist! </h1>
<ul id="playlist">
    <li id="song1"></li>
    <li id="song2"></li>
    <li id="song3"></li>
    </ul>
</body>
</html>

Upvotes: 0

Rain Diao
Rain Diao

Reputation: 926

it's just a typo.

you put window.onload = addSong; in the definition of the function addSong. so window.onload will never be set, as addSong will never be called.

function addSongs() {
    var song1 = document.getElementById("song1");
    var song2 = document.getElementById("song2");
    var song3 = document.getElementById("song3");

    song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
    song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
    song3.innerHTML = "I Code the Line, by Johnny Javascript";

}

window.onload = addSongs; //move this line out of function definition.

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150020

You need to move the line:

window.onload = addSongs;

To outside the function.

"I have determined it's because the script is running before the DOM is complete"

The script is running, but all it does is declare a function, it doesn't ever call it (because the aforementioned line is in the wrong place).

Upvotes: 3

Related Questions