3

divA を非表示にして divB を表示したい。ボタンをクリックすると、divB を非表示にして divA を表示します。JQuery を使用したくありません。

ページの読み込み時に divA を非表示にするのに問題があります。ボタンをクリックすると、divB が正しく非表示になります。

これをドキュメントの冒頭に追加しました

<script>
    var doNotShow= document.getElementById('divA');
    doNotShow.style.display = 'none';
</script>

問題は、それが機能しないということです。奇妙なことに、後でボタンをクリックしてdivBを非表示にしようとすると、divBが非表示になります。divA は、ファイル内の JavaScript 部分の後にあります。

4

3 に答える 3

8

これをドキュメントの冒頭に追加しました

クエリされた ID を持つ要素がドキュメントに存在するdocument.getElementById 後に実行する必要があります。そうでない場合nullは返されます。

スクリプト タグをページの下部 (または単純にそれらの要素の後) に移動するか、window.onloadハンドラー内にラップすることができます。

すべての要素がすでにページに存在し、 DOM 対応 ( ) ハンドラーでのコードのラップについて心配する必要がないよう<script>に、閉じる直前にタグを配置することをお勧めします。</body>window.onloadDOMContentLoaded

于 2013-08-27T20:28:47.373 に答える
1

Javascript は、読み込まれると実行されます。スクリプトの後に divA が定義されている場合、スクリプトを実行するものは何もありません。これは、Firefox の Firebug や Chrome の開発者ツールなどのデバッグ ツールを使用するとわかります (TypeError が発生します)。

于 2013-08-27T20:29:04.563 に答える
1

あなたのコードはdivADOMに存在する前に実行されています。それがうまくいかない理由です。

現在のソリューションで問題を解決するにdivAは、ドキュメント内のマークアップの後にスクリプトを配置します。

ただし、JavaScript を使用する必要はありません。おそらく、最初にdivA要素を非表示にするべきではありません。代わりに、次の CSS ルールを使用できます。

#divA { display: none; }
于 2013-08-27T20:33:17.093 に答える