window.onloadで関数が効かない（エラーになる）原因

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の中身を参照する関数を発動させるときは注意が必要ね！