Javascript window.onload不等待DOM加载_Javascript_Html_Dom

Javascript window.onload不等待DOM加载

javascript html dom

Javascript window.onload不等待DOM加载,javascript,html,dom,Javascript,Html,Dom,我对编程有点陌生，一直在阅读第一本HTML5编程书籍。在第65页，他们有一个练习，可以帮助您将javascript函数插入HTML头部，从而更改位于页面主体中项目符号处的文本。当我在浏览器中打开HTML文件时，页面会加载，但Javascript函数中的内容不会添加到要点中。我确定这是因为在DOM完成之前脚本正在运行，因为当我将书的代码更改为时，页面加载正确以下是书中的代码（似乎不起作用）：我的播放列表函数addSongs（）{ var song1=document.getElementB

我对编程有点陌生，一直在阅读第一本HTML5编程书籍。在第65页，他们有一个练习，可以帮助您将javascript函数插入HTML头部，从而更改位于页面主体中项目符号处的文本。当我在浏览器中打开HTML文件时，页面会加载，但Javascript函数中的内容不会添加到要点中。我确定这是因为在DOM完成之前脚本正在运行，因为当我将书的代码更改为

时，页面加载正确

以下是书中的代码（似乎不起作用）：


我的播放列表
函数addSongs（）{
var song1=document.getElementById（“song1”）；
var song2=document.getElementById（“song2”）；
var song3=document.getElementById（“song3”）；
song1.innerHTML=“蓝色绒面绒线，由Elvis Pagely编写”；
song2.innerHTML=“Jerry JSON Lewis创作的大火中的伟大物体”；
song3.innerHTML=“我编写代码，由Johnny Javascript编写”；
window.onload=添加歌曲；
}
我很棒的播放列表！

我已经阅读了不同的帖子，很多人建议使用JQuery（我希望在接下来的几个月里学习），但我只是好奇

window.onload=function就被弃用了。这本书中的许多练习都使用了这个原理，在我弄明白这个原理之前，我无法前进。如有任何建议或不同方法，我们将不胜感激
谢谢
 您需要移动线：
window.onload = addSongs;

到功能之外
“我确定这是因为脚本在DOM完成之前运行”
脚本正在运行，但它所做的只是声明一个函数，它永远不会调用它（因为前面提到的行位于错误的位置）。
您需要移动该行：
window.onload = addSongs;

到功能之外
“我确定这是因为脚本在DOM完成之前运行”
脚本正在运行，但它所做的只是声明一个函数，它永远不会调用它（因为前面提到的行位于错误的位置）。
这只是一个输入错误
你把window.onload=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.

这只是一个打字错误
你把window.onload=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.

您需要移动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>


我的播放列表
函数addSongs（）{
var song1=document.getElementById（“song1”）；
var song2=document.getElementById（“song2”）；
var song3=document.getElementById（“song3”）；
song1.innerHTML=“蓝色绒面绒线，由Elvis Pagely编写”；
song2.innerHTML=“Jerry JSON Lewis创作的大火中的伟大物体”；
song3.innerHTML=“我编写代码，由Johnny Javascript编写”；
}
window.onload=添加歌曲；
我很棒的播放列表！





您需要移动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>


我的播放列表
函数addSongs（）{
var song1=document.getElementById（“song1”）；
var song2=document.getElementById（“song2”）；
var song3=document.getElementById（“song3”）；
song1.innerHTML=“蓝色绒面绒线，由Elvis Pagely编写”；
song2.innerHTML=“Jerry JSON Lewis创作的大火中的伟大物体”；
song3.innerHTML=“我编写代码，由Johnny Javascript编写”；
}
window.onload=添加歌曲；
我很棒的播放列表！





感谢您的回复，它们都非常有用，非常有意义。现在我的代码可以工作了，我也可以完成接下来的几个练习了@谢谢你的回复，他们都非常有帮助，非常有意义。现在我的代码可以工作了，我也可以完成接下来的几个练习了@谢谢你花时间回复。。。这很有帮助。当心！感谢您花时间回复。。。这很有帮助。当心！