Javascriptの変数について質問です。

hogeBtn = document.getElementById("hoge");
hogeBtn.onclick = function(){　←※1
hoge();
}
function foo(){
hogeBtn.style.display = "none"; ←※2
}

一行目で設定した変数を、
※1ではちゃんと使うことができるのに、
※2ではエラーになってしまうのはなぜでしょうか。
どなたかアドバイスをお願いします。