質問: "クリックされた!"; console.log("You're getting on my nerves!"); }; }); ``` ====回答のお願い==== 事例2のJSが動作しない理由として、JSが読み込まれる時点で該当要素がないから...みたいな説明をよく見るのですが、恥ずかしながら当方は理解できていません。JSがクリックイベントの記述なのでクリックイベント時点で、要素があるか否かが重要でないのか?と思ってしまうわけです。 本件をどう理解すればよろしいのでしょうか? 事例3でもJSが動作しない理由を教えて頂けますでしょうか? `$(function(){`の本質の意味を捉えていないのかも知れません。 JQueryの記述をしてしまえば 動くのかも知れませんが、しっかり理解したいので動作しなかった理由をご説明頂けますでしょうか?
回答: **事例2**について、「JSが読み込まれる時点で該当要素がないから」という説明は合っています。 これは確かに「クリックイベントの記述」ですが、実際に事例2のコードで行われていることは、「クリックイベントを**登録する**」ということです。クリックイベントを登録することによって、その後その要素がクリックされたら関数が呼ばれるようになるのです。 ここで重要なことは、**イベントを登録するためには登録先の要素を取得する必要がある**という点です。登録するために要素が必要ということは、当然ながら、イベントを登録する時点(=JSが読み込まれた時点)で該当要素が必要ということです。 実際、これが事例2が動かなかった原因です。 実際、問題のソースコードはまず当該要素を**取得**し、それに対してイベントを**登録**するコードになっています。取得部分は`document.getElementById("text-button")` であり、これはIDが`"text-button"`である要素を取得するという意味です。そして、続く`.onclick = ...`という部分でその要素に対してイベントを登録しています。 分かりやすいように、取得した要素を変数に入れるように書き直すと次のようになります。 ``` var button = document.getElementById("text-button"); button.onclick = function() { document.getElementById("text").innerHTML = "クリックされた!"; console.log("You're getting on my nerves!"); }; ``` **事例3**が動かなかった理由については、`$`はJavaScript(正確にはDOM)にもともと存在するものではないことが理由ではないかと思います。 質問者さんもご存知の通り、`$`は確かに「DOM要素の読み込みが完了してから動作させる」というような意味で使えますが、これは`$`はJavaScript標準の機能ではなく**jQuery**という**ライブラリ**の機能です。ですから、**まずjQueryを読み込まなければ使えません**。 事例3のソースコードは、おそらく先に以下のようなHTMLでjQueryを読み込めば動くようになると思います。 ``` ``` なお、参考として、ライブラリであるjQueryに頼らない、JavaScript(DOM)に標準の方法をお伝えします。以下のように`document`の`DOMContentLoaded`イベントを登録するのがよいでしょう。 ``` document.addEventListener("DOMContentLoaded", function(){ document.getElementById("text-button").onclick = function() { document.getElementById("text").innerHTML = "クリックされた!"; console.log("You're getting on my nerves!"); }; }); ```