Question

我对编程有些新意，并且一直在使用Head First HTML5编程手册。在页65，他们有一个练习，可以帮助您在HTML头中插入一个javascript函数，该函数将更改位于页面正文中的项目符号点的文本。当我在浏览器中打开HTML文件时，页面会加载，但Javascript函数中的内容不会添加到项目符号点。我确定这是因为脚本在DOM完成之前运行，因为当我将书的代码更改为<body onload="addSongs()">时，页面加载正确。

这是本书中的代码（似乎不起作用）：

<!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>

我已经阅读了不同的帖子，许多人建议使用JQuery（我希望在接下来的几个月内学习），但我只是好奇window.onload = function;是否已被弃用本书出版或者我在某处犯了错误。本书中的很多练习都使用了这个原理，在我弄清楚之前我无法继续前进。任何建议或不同的方法都表示赞赏。

谢谢！

Answer 1

您需要移动该行：

window.onload = addSongs;

到外部该功能。

“我确定这是因为脚本在DOM完成之前运行”

脚本正在运行，但它只是声明一个函数，它不会调用它（因为前面提到的行位于错误的位置）。

Answer 2

这只是一个错字。

您将window.onload = addSong;放在addSong函数的定义中。因此永远不会设置window.onload，因为永远不会调用addSong。

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.

Answer 3

在定义函数之后，您需要移动window.onload = addSongs;，而不是之前。像这样：

<!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>

Javascript window.onload不等待DOM加载

3 个答案: