getElementById IE7 Issue

As previously stated, I'm taking some time to learn pure JavaScript. That means I am beginning to experience the joy that is cross-browser JS quirks! I recently came across a simple issue: IE7 was throwing the following error for getElementById:

Object Doesn't Support this Property or Method

In my head I was thinking: "What the heck IE? getElementById is the MAIN THING you should get right!". The code was as following:

  <script type="text/javascript">
    window.onload = function()
    {
      var d = document;
      block = d.getElementById('block');
      var windowHeight = window.innerHeight || document.documentElement.clientHeight;

      var blockHeight = block.clientHeight;
      var offset = block.offsetTop;
      block.style.top = windowHeight - (offset + blockHeight) + 'px';
    };

  </script>

The Solution

It seems that I somehow forgot to include "var" before the assignment of "blocks" on line 5. Including "var" fixed the problem in IE7!

  <script type="text/javascript">
    window.onload = function()
    {
      var d = document;
      var block = d.getElementById('block');
      var windowHeight = window.innerHeight || document.documentElement.clientHeight;

      var blockHeight = block.clientHeight;
      var offset = block.offsetTop;
      block.style.top = windowHeight - (offset + blockHeight) + 'px';
    };

  </script>

Man...what have I gotten myself into?

$("joseph").hide();

January 30, 2011