フォームに入力された値を取得するコードを記述する場所

Question

フォームの入力された値を 取得したくコードを書きました。
実際動作はできていて、ブラウザのデバック機能で確認するとエラーが一件発生してました。
みてみると、フォームの値が空だと言われていました。
原因をみてみると、フォームより先にJavaScriptを記述してあるため、値がセットされていないのに取得していたためのエラーだそうです。
このように、フォームのデータを取得するコードは、フォームより後ろに書くものなのでしょうか？
よく、JavaScriptをhead内に記述しているのを見かけるのですが.......

Answer 1

JavaScriptをhead内に記述しているのを見かける

onload か DOMContentLoaded を待って実行するようにします。

【DOMContentLoaded - Web 技術のリファレンス | MDN】
https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded

DOMContentLoaded イベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に発火し、 スタイルシートや画像、サブフレームの読み込みが終わるのを待ちません。 ページが完全に読み込み終わったことを検知するためにのみ、全く異なるイベント ─ load ─ を使用するべきです。

【window.onloadとjQueryの$(document).ready等の比較】
https://rcmdnk.com/blog/2015/07/11/computer-javascript-jquery/

Comments

[ryo-dev]

今回は、loadを使いhtml,CSS,画像などが全てロードしたあとに呼び出されるようにすればよいということですか？

[kei344]

DOMContentLoaded でいいと思いますよ。

[ryo-dev]

htmlの読み込み後ならOKなので、DOMContentLoaded で大丈夫という事でしょうか？

[kei344]

動かしてみて、試した上で聞いていますか？

[ryo-dev]

はい。どちらも挙動がかわらず実行できるので問題はないとおもうのですが、念のため確認しました。