BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] nullのプロパティ 'getElementsByClassName' を読み取ることができません - "if" ステートメントを使用して強制的に読み取ることは可能ですか？

2022-02-27 17:31:13

質問

私は明らかに全くの初心者です。私は2つのhtmlページを持っていて、両方とも同じJavaScriptファイルを呼び出しています。JSの機能は、順序なしリストから特定のリスト項目を非表示にすることです。片方のページには呼び出されているクラスがないので（そのdivはページに存在しない）、JSがその特定の要素がないことを見たとき、nullエラーを投げているのだと思いますが、それは私にとって理にかなっています。おそらく、"if" ステートメントを使用して、これを修正する方法はありますか？言い換えれば、このhtml要素が存在しない場合、とにかくこれを行う？ 

<script>
function opNotices() {

    var list = document.getElementById("op-notices-1").getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[0].style.display = "none";
    list.getElementsByTagName("li")[1].style.display = "none";

    var list = document.getElementById("op-notices-2").getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[2].style.display = "none";
    list.getElementsByTagName("li")[3].style.display = "none";
}

opNotices();
</script>

<html>
 <div id="op-notices-2"><!--#include virtual="content.html" --> 
      </div>
    </html>

content.htmlは。 

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>

出力は

  • a
  • b
  • c
  • d
  • e
  • f

でも、cとdは隠したい。

どのように解決するのですか？

getElementsByClassName' of null"エラーはクラス名がないことを意味するのではなく、'getElementsByClassName'を実行しようとしたものが存在しないことを意味します。言い換えれば、あなたのコードは、クラス名で要素を検索しようとするのに十分な距離をとっていないのです。

具体的には、以下のような行になります。 

var list = document.getElementById("op-notices-1").getElementsByClassName("content")[0];

は、次のようなステップを実行します。

  1. 変数名に格納されている値をすべて取得する document . 他に何も設定していないので、期待通りHTMLドキュメントが返ってきます。
  2. ステップ1で取得した値から getElementById . このステップは、ステップ 1 の値が object (のようなプロパティの集合（すなわち { foo: 1; bar: "2" } ). このため document はオブジェクトなので、これは問題なく動作します。 getElementById .
  3. 手順2で取得した値を引数で呼び出す ("op-notices-1") . これは、ステップ 2 の値が function . という結果を返します。 null (というIDを持つHTML要素が存在しないため）。 #op-notices-1 ).
  4. 手順3で取得した値から、以下のプロパティを探します。 getElementsByClassName . これは、ステップ 3 の値が object は、ステップ2のように そのため ではありません。 (それは null このスクリプト全体では、これ以降何も実行されません。

つまり、あなたの問題を解決するには、ステップ 3 と 4 の間で null をチェックする必要があるのです。このステップを挿入すると、"op-notices-1" を処理するコードは次のようになります。 

var opNotices1 = document.getElementById("op-notices-1");
if (opNotices1 !== null) {
    var list = opNotices1.getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[0].style.display = "none";
    list.getElementsByTagName("li")[1].style.display = "none";
}

これは、単に "もし 'op-notices-1' がなければ、そのビットの残りをスキップしてください、というものです。 getElementById("op-notices-1") 戻る null は、単にフィルタリングを行うためのリストが存在しないことを意味します）。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します