web-dev-qa-db-ja.com

Javascript：Uncaught TypeError：nullのメソッド 'addEventListener'を呼び出すことができません

私はかなり簡単なことをしようとしていますが、おそらくドキュメントを検索するのに十分ではないという理由で、これを機能させることはできません。

次のような機能するインラインJSがあります。

<A title="Wolfram IP Calc" href="javascript:txt=Prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');%20if(txt)%20window.open('http://www.wolframalpha.com/input/?i='+txt);void(O);">Compute!</A>

さまざまな理由から、私はJSを分離しようとしています。

エラーUncaught TypeError: Cannot call method 'addEventListener' of nullを表示する次のテストページを作成しました。

<HTML> <HEAD profile="http://www.w3.org/2005/10/profile"> <script type="text/javascript">
var compute = document.getElementById('compute');
compute.addEventListener('click', computeThatThing, false);

function computeThatThing() {
    txt=Prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');
    if(txt) {
        window.open('http://www.wolframalpha.com/input/?i='+txt);
    }
}
</script></HEAD>
<BODY>
<A title="Wolfram IP Calc" id="compute" href="javascript:void(O);">Test</A>
</BODY>
</HTML>

そのような問題を指し示すことがわかった唯一のことは、addEventListenerが<A>で動作できないが、<IMG>を処理する必要があるということです'これをいくつかの画像に注ぐ予定です）ので、私は次のものを無駄に追加しようとしました：

<img id="compute" src="http://products.wolframalpha.com/images/products/products-wa.png" />

私が間違っていることを指摘してくれてありがとう。たぶん明白なことかもしれませんが、JSの経験はほぼゼロであり、これまで必要だったときに貨物のカルト化を行ってきました。

javascriptaddeventlistener
24
Jan

コードは_<head>_ =>にあり、要素がレンダリングされる前に実行されるため、document.getElementById('compute');はMDNが約束するようにnullを返します...

element = document.getElementById（id）;
elementはElementオブジェクトへの参照、、または指定されたIDの要素がドキュメントにない場合はnullです。

[〜＃〜] mdn [〜＃〜]

ソリューション：

  1. ページの下部にスクリプトを配置します。
  2. ロードイベントでアタッチコードを呼び出します。
  3. JQueryライブラリを使用すると、DOM readyイベントになります。

JQuery readyイベントとは何ですか、なぜ必要なのですか？
（JavaScriptのロードイベントだけではない理由）：

JavaScriptはページのレンダリング時にコードを実行するためのロードイベントを提供しますが、画像などのすべてのアセットが完全に受信されるまで、このイベントはトリガーされません。ほとんどの場合、DOM階層が完全に構築されるとすぐにスクリプトを実行できます。 .ready（）に渡されるハンドラーは、DOMの準備が完了した後に実行されることが保証されているため、通常は他のすべてのイベントハンドラーをアタッチするのに最適な場所です...
...

readydocs

54
gdoron

スクリプトが計算される現在のコードでは、html要素がドキュメントに存在しないため、HEADではなくBODYの最後にスクリプトタグを移動します。

Jqueryをしたくないので。 window.onloadまたはdocument.onloadを使用して、現在のスクリプトタグにあるコード全体を実行します。 window.onload vs document.onload

0
Shubham Gupta