onload時にp要素のinnerHTMLを変更する処理をしたいな
window.onload=hoge(); ・・・っと
Uncaught TypeError: Cannot set property 'innerHTML' of null
・・・
<script> function hoge(){ document.getElementById("text").innerHTML="text"; } window.onload=hoge(); </script> <p id="text"></p>
これがエラーになるのは、window.onload=hoge();が発動した時、まだ<p id="text"></p>が読み込まれていないからです。
onloadはDOMの読み込みが終わった時に発動するから、<p id="text"></p>も読み込まれているはずじゃないの？
hoge変数には関数オブジェクトが入っています。関数オブジェクトはコードを含んだ指示書のようなものだと考えてください。
これをhoge() のように()をつけて呼び出すと「hoge の指示書の内容を今すぐ実行しろ」とブラウザに命令することになります。
ブラウザはDOMを上から読み込んでいきますからwindow.onload=hoge();に到達したタイミングではまだp要素は読み込まれていませんが、hoge();とあるのでhogeの内容が実行されます。
そして、実行したタイミングでは p 要素はまだ存在しないのでこれは当然動作しないことになります。
逆に言えば()をつけなければ指示書の内容は実行されません。window.onload = hoge;と書けば、「hogeの指示書を渡しておくから、ページの読み込みが終わったら実行してね」と命令することができます。
この場合は当初意図した通り、p要素の中身が書き換えられることになります。
onloadでDOMの中身を参照する関数を発動させるときは注意が必要ね！
