0

重複の可能性:
jQuery または `getElementById` などの DOM メソッドが要素を見つけられないのはなぜですか?

私はjsを学ぼうとしていますが、非常に単純な例を機能させるのに苦労しており、間違っていることを見つけることができません。以下の例がうまくいくはずだと私は理解しています。2番目のボタンをクリックすると、関数f2が呼び出され、アラートとして「バットマン」が出力されるため、JavaScriptページが正しくリンクされていることがわかります。しかし、最初のボタンをクリックしても何も起こりません。

HTML:

<head>
<script type="text/javascript" src="Positioning and flow tests.js"></script>
</head>

<body>

<p id="par1">Test</p>

<button onclick="f1()">Click me for par 1 content</button>

<button onclick="f2()">Click me for predefined text</button>
</body>
</html>

Javascript

// JavaScript Document

var var1 = document.getElementById("par1");

function f1()
{
    alert(var1.innerHTML);
}

function f2()
{
alert("batman");
}
4

2 に答える 2

3

ページの下部に JavaScript を配置する必要があります。そうしpar1ないと、コードの実行時に要素を使用できません。

<head>
    <title>Positioning and flow tests</title>
</head>

<body>
    <p id="par1">Test</p>
    <button onclick="f1()">Click me for par 1 content</button>
    <button onclick="f2()">Click me for predefined text</button>
    <script type="text/javascript" src="Positioning and flow tests.js"></script>
</body>

これに代わる方法は、ページの読み込みが完了したときにコードを実行するように設定することです。

var var1;
window.onload = function () {
    var1 = document.getElementById("par1");
};

function f1()
{
    alert(var1.innerHTML);
}

function f2()
{
    alert("batman");
}

ただし、これはページが完全に読み込まれるまで待機します。これには、すべての画像のダウンロードが含まれます。すべての画像が完全にダウンロードされる前に最初のボタンをクリックすると、エラーが発生します。

于 2013-02-03T23:35:31.280 に答える
1

要素の後にコードを配置するか、次のようにする必要があります: HTML:

<body onload="init()">
...

JS:

var var1;
function init() {
    var1 = document.getElementById("par1");
}

function f1()
{
    alert(var1.innerHTML);
}

問題は、まだ作成されていないため存在しない要素を取得しようとしていることです。「init」関数を使用すると、要素を取得しようとする前に、ドキュメント全体が読み込まれるまで待機します。

于 2013-02-03T23:40:14.817 に答える