0

私はプログラミングの初心者で、Head First HTML5 プログラミングの本を読んでいます。65 ページには、ページの本文の箇条書きにあるテキストを変更する JavaScript 関数を HTML ヘッドに挿入するのに役立つ演習があります。ブラウザーで HTML ファイルを開くと、ページが読み込まれますが、JavaScript 関数のコンテンツが箇条書きに追加されません。本のコードを に変更する<body onload="addSongs()">と、ページが正しく読み込まれるため、DOM が完了する前にスクリプトが実行されていることが原因であると判断しました。

本のコードは次のとおりです（動作していないようです）：

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

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).

于 2013-02-06T12:14:00.200 に答える
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 に答える
0

それは単なるタイプミスです。

window.onload = addSong;関数 addSong の定義を入れます。addSong が呼び出されないため、window.onload が設定されることはありません。

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 に答える