BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] なぜ、"TypeError: getElementById を使用すると、「Cannot read property 'value' of null」と表示されるのですが？

2022-02-10 09:33:38

質問

以下のコードで 

function Transact() {
    if(document.getElementById('itctobuy').value!='') {
        itctobuy = parseInt(document.getElementById('itctobuy').value);
    }
    if(document.getElementById('steamtobuy').value!='') {
        steamtobuy = parseInt(document.getElementById('steamtobuy').value);
    }
    if(document.getElementById('reltobuy').value!='') {
        reltobuy = parseInt(document.getElementById('reltobuy').value);
    }
    if(document.getElementById('airtobuy').value!='') {
        airtobuy = parseInt(document.getElementById('airtobuy').value);
    }
    if(document.getElementById('bsnltobuy').value!='') {
        bsnltobuy = parseInt(document.getElementById('bsnltobuy').value);
    }
    updateValues();
}

この関数の実行は、単純な onclick のボタンです。5つのtextarea要素があり、ユーザーはどれかに数値を入力することができ、ボタンをクリックすると、textareaの値が空でなければこれらの変数に値が格納されるはずです（ただし、空の条件がない場合でも動作しません）。
ブロック全体を削除すると updateValues() は正常に実行されますが、それを戻すと実行されなくなるので、問題はそこにあるのです。この原因は何でしょうか、またどうすれば解決できるでしょうか。

編集：コンソールには以下のように表示されています。

Uncaught TypeError: Cannot read property 'value' of null at TRANSACT at HTMLButtonElement.onclick

では、このエラーの原因は何なのでしょうか？すべてのテキストフィールドを入力し、その値がNULLでない場合は動作しません。

解決方法は？

<ブロッククオート

Uncaught TypeError: Cannot read property 'value' of null

これは、そのコードが実行された時点では、これらの要素の少なくとも1つが存在しないことを物語っています。 getElementById が返ってくる null を読もうとしてるんだろ？ value プロパティを取得します。

getElementById 意志 のみ 戻る null を呼び出した時点で、与えられたIDを持つ要素がドキュメントに存在しない場合。一般に、要素が存在しない理由は以下のカテゴリに分類されます。

  1. 呼び出し getElementById 早すぎる
  2. のスペルを間違えて id (例:タイプミス)
  3. を使用することで name の代わりに id
  4. その要素は存在するが、ドキュメントに含まれていない (稀に)

あなたの場合、ボタンをクリックしたときなので、おそらく2番か3番でしょう。どのIDに問題があるかは、エラーが特定した行を見るか、ブラウザのデバッガを使ってコードを一文ずつ見ていけばわかります。

それでは、カテゴリー別に見ていきましょう。

1. 呼びかけ getElementById 早すぎる

よくある間違いの1つは getElementById の中に script ブロックは 以前 というように、HTMLの中の要素を指定します。 

<script>
document.getElementById("foo").innerHTML = "bar";
</script>
<!-- ...and later... -->
<div id="foo"></div>

このコードが実行された時点では、この要素は存在しません。

解決方法 :

  • を移動します。 script をHTMLの最後、つまり閉じた </body. タグ
  • への呼び出しを置きます。 getElementById のようなコールバックで DOMContentLoaded イベント、またはボタンクリックなど。

しない 使用 window.onload または <body onload="..."> になるまでコードの実行を待ちたい場合は別です。 すべて の外部リソース (すべての画像を含む) が読み込まれました。

2. のスペルミス id

これは本当によくあることで getElementById("ofo") で定義されている場合、その要素は id="foo" .

例 

<div id="foo"></div>
<script>
document.getElementById("ofo").innerHTML = "I'm foo"; // Error
</script>

解決方法 : 正しいIDを使用すること :-)

3. を使用する name の代わりに id

getElementById("foo") を持つ要素を探します。 id="foo" , ではなく と name="foo" . name != id .

例 

<input name="foo" type="text">
<script>
document.getElementById("foo").value = "I'm foo"; // Error
</script>

解決方法 : 使用方法 id ではなく name . :-) (または、その要素を document.querySelector('[name="foo"]') .)

4. 要素は存在するが、ドキュメントに存在しない

getElementById ルックス ドキュメント内 を指定します。ですから、もしその要素が 作成 が、ドキュメントに追加されていない場合、それを見つけることはできません。

例 

var div = document.createElement("div");
div.id = "foo";
console.log(document.getElementById("foo")); // null

メモリ全体を見るわけではなく、ドキュメント内を見るだけです（具体的には、呼び出したドキュメントを見ます。）

解決策 要素がドキュメント内にあることを確認してください。おそらく、要素を作成した後に追加するのを忘れていませんか？(しかし、上記の例では、すでにその要素への参照を持っているので getElementById を全く知らない)

関連

最新

おすすめ

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