javascript学習中のエラー

###前提
(例)javascriptを勉強しています。
ボタンを押すと文字が消えるプログラムを書いてる途中に
以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

test.html:9 Uncaught TypeError: Cannot read property 'style' of null(…)hogehoge @ test.html:9onclick @ test.html:16

###該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>	
hoge = document.getElementById("main"); /*関数の外に持ってくる*/
		function hogehoge(style) {
			hoge.style.color = "#FFFFFF";
		};
	</script>
</head>
 
<body>
	<div id="main">文字だよ</div>
	<INPUT type="button" value="文字を消すボタン" onClick="hogehoge(style)"></INPUT>
</body>
</html>

ちなみに、hoge = document.getElementById("main");を関数の中に入れると動きました(以下参照)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>	
		function hogehoge(style) {
			hoge = document.getElementById("main");
			hoge.style.color = "#FFFFFF";
		};
	</script>
</head>
 
<body>
	<div id="main">文字だよ</div>
	<INPUT type="button" value="文字を消すボタン" onClick="hogehoge(style)"></INPUT>
</body>
</html>

hogeはグローバル変数なので関数の外で代入しても動くと思っていたのですが、
１個目のコードだけ動かない理由がわからずモヤモヤしています...
どなたかお分かりになる方いましたらご教授いただければ幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

実行順序の問題だと思います。
hogeに代入する処理は、HTMLの読み込みが完了する前に実行されるので、<div id="main">文字だよ</div>がない状態で実行されるので、エレメントが見つからないと思います。
以下のように読み込み完了後に実行すれば動くと思います。ただし、グローバル変数はなるべく使わないほうがいいと思うので、関数内で実行するコードの方がいいと思いますよ。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function() {
            hoge = document.getElementById("main"); /*関数の外に持ってくる*/
        }
        function hogehoge(style) {
            hoge.style.color = "#FFFFFF";
        };
    </script>
</head>

<body>
    <div id="main">文字だよ</div>
    <INPUT type="button" value="文字を消すボタン" onClick="hogehoge(style)"></INPUT>
</body>
</html>

参考：ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ

投稿2016/12/01 23:48