0

我对编程有点陌生，并且一直在阅读 Head First HTML5 Programming 一书。在第 65 页，他们有一个练习，可帮助您将 javascript 函数插入 HTML 头部，该函数将更改位于页面正文中的项目符号点处的文本。当我在浏览器中打开 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;自从这本书出版以来它是否已被弃用，或者我是否正在制作某处的错误。本书中的很多练习都使用了这个原理，在我弄明白之前我不能继续前进。任何建议或不同的方法表示赞赏。

谢谢！

4

3 回答 3

3

您需要移动该行：

window.onload = addSongs;

到函数之外。

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

该脚本正在运行，但它所做的只是声明一个函数，它从未调用它（因为上述行位于错误的位置）。

于 2013-02-06T12:14:00.200 回答
0

这只是一个错字。

您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.
于 2013-02-06T12:16:32.307 回答
0

您需要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>
于 2013-02-06T12:22:30.857 回答