0

私は最近 JS を学び始めましたが、理解できない問題があります...多くの解決策を試しましたが、何も役に立ちませんでした。

私は非常に基本的なJSコードを持っています:

<body>

<h1>My First JS Page</h1>

<p id="demo">My First Paragraph.</p>

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>

スクリプトが下にある場合、コードは機能しますが、同じスクリプトを外部として添付し、それを HEADER 内の HTML に接続すると、スクリプトは機能しません....

4

4 に答える 4

1

HEADER の HTML

スクリプトを に配置すると、 の<head>前に表示され<p id="demo">ます。

スクリプトはすぐに を試行するためgetElementById('demo')、その要素は存在しません。したがってundefined、要素の代わりに取得します。

スクリプトを要素の後に移動するか (問題のコードにあるように)、コードを関数でラップし、その関数をイベント ハンドラーとして使用する必要があります(要素まで発生しないイベントの場合)。 load イベントなど)。

于 2012-08-31T10:18:38.603 に答える
1

これは、ドキュメントまたは<body>HTML ページの一部がまだ読み込まれていないために発生します。

この問題を解決するには、次のようにイベント ハンドラを のイベントに登録しonLoadます。<body>

<html>
<head>
<script type="text/javascript">

function onDocumentReady() {
   document.getElementById("demo").innerHTML="My First JavaScript";
}

window.onload = onDocumentReady;

</script>
</head>
<body>
<h1>My First JS Page</h1>

<p id="demo">My First Paragraph.</p>
</body>
</html>
于 2012-08-31T10:18:56.123 に答える
1

これは操作の順序についてです。あなたが持っているスクリプトは、ブラウザーによって解析されるとすぐに実行されます。つまり、「demo」の ID を持つレンダリングされた要素がない場合、何も起こりません。<script>要素の上にブロックを配置するだけで、<p>この動作に気付くでしょう ( JSFiddle の例)。これに対抗するには、すべてのスクリプトがドキュメントの最後にあることを確認するか (不適切な形式)、何らかの方法を使用して、ドキュメントが完全に読み込まれた後にスクリプトを実行する必要があります (推奨)。最も一般的な 2 つの方法は、window.onloadイベントを使用することです。

window.onload = document.getElementById("demo").innerHTML="My First JavaScript";

または、jQuery などの JS ライブラリを組み込み、その組み込みメソッドを使用します。

$(document).ready(function() { 
    $("#demo").html("My First JavaScript");
}
于 2012-08-31T10:19:11.377 に答える
1

外部スクリプトを

window.onload

例

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My first JS</title>
<script src="test.js"></script>
</head>

<body>
<h1>My First JS Page</h1>
<p id="demo">My First Paragraph.</p>
</body>
</html>

JS ファイル名 test.js

window.onload = function () {
    document.getElementById("demo").innerHTML="My First JavaScript";
    //more code can go here if you want
}
于 2012-08-31T10:27:50.083 に答える