gpt4 book ai didi

Javascript window.onload 不等待 DOM 加载

转载 作者:行者123 更新时间:2023-11-28 20:39:14 26 4
gpt4 key购买 nike

我对编程有点陌生,并且一直在阅读《Head First HTML5 编程》一书。在第 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; 是否有效。自从这本书出版以来,或者如果我在某个地方犯了错误,它已被弃用。本书中的很多练习都使用了这个原理,在弄清楚这一点之前我无法继续前进。任何建议或不同的方法表示赞赏。

谢谢!

最佳答案

您需要移动线路:

window.onload = addSongs;

到函数外部

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

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

关于Javascript window.onload 不等待 DOM 加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14728815/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com