Internet Explorer throwing error on getElementById

I'm having trouble with some javascript which uses getElementById. It works fine in FF, Safari and Chrome, but IE(8 - haven't tried others) bails out.

The relevant bit of html is a div called topnav:

  <div id="topnav">
   ... some HTML ...
  <div>
  <div id="sub_1" class="lowernav">
   ... some HTML ...
  </div>
  <div id="sub_2" class="lowernav">
   ... some HTML ...
  </div>

In my javascript, I want to find topnav. The full code (up to where it bails) is this:

<script>

 window.onload = init();

 function init() {
  // Show current menu
  showCurrentMenu();
 }

 function showCurrentMenu() {
  hideMenus(); // Hide all menus and then show the current one
  topnav = document.getElementById('topnav');
  ... rest of code ...
 }

 function hideMenus() {
  var divlist = document.getElementsByTagName('div');
  for(var ii=0; ii<divlist.length; ii++) {
   if(divlist[ii].className != divlist[ii].className.replace('lowernav','')) {
    divlist[ii].className 开发者_运维技巧+= ' hidden';
   }
  }
 }

... then some other code it hasn't reached yet...

Am I doing something wrong here? It may well be something really obvious, but for the life of me, I can't see it! All advice is much appreciated.

ETA: Ok, here's the whole code, as it currently stands:

<script>
 window.onload = init;

 function init() {
  // Show current menu
  showCurrentMenu;
  // Attach 'onmouseover' event to main menu items
  topnav = document.getElementById('topnav');
  // Get all items in list
  var menulist = topnav.getElementsByTagName('a');
  for(var ii=0; ii<menulist.length; ii++) {
   menulist[ii].onmouseover = showMenu;
  }

  document.getElementById('mainHomeNav').onmouseout = restoreMenu;
 }

 function restoreMenu(e) {
  var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
  if (targ.id == "mainHomeNav") {
   showCurrentMenu;
  }
 }

 function hideMenus() {
  var divlist = document.getElementsByTagName('div');
  for(var ii=0; ii<divlist.length; ii++) {
   if(divlist[ii].className != divlist[ii].className.replace('lowernav','')) {
    divlist[ii].className += ' hidden';
   }
  }
 }

 function showCurrentMenu() {
  hideMenus;
  topnav = document.getElementById('topnav');
  // Get all items in list
  var menulist = topnav.getElementsByTagName('a');
  for(var ii=0; ii<menulist.length; ii++) {
   if(menulist[ii].className != menulist[ii].className.replace('thisSection','')) {
    var thisid = menulist[ii].id;
    var thissubmenu = document.getElementById(thisid + '_sub');
    thissubmenu.className = thissubmenu.className.replace(/hidden/g,'');
   }
  }
 }

 function showMenu() {
  hideMenus;
  // show this menu
  var submenu_id = this.id + '_sub';
  var submenu = document.getElementById(submenu_id);
  submenu.className = submenu.className.replace(/hidden/g,'');
 }
</script>

---

The problem is

window.onload = init();

This will call the init function immediately, and then use its return value as the page's onload function. You need:

window.onload = init;

which will call the init function only after the page has fully loaded.

---

I found the problem - I didn't have 'var' in front of 'topmenu'.

So instead of

topnav = document.getElementById('topnav');

it should have been

var topnav = document.getElementById('topnav');

Thanks everyone for the help.

---

Your problem lies in the following line:

window.onload = init(); // this will CALL init() and assign the return value

Since init doesn't return anything, window.onload will be undefined.

Now the reason for it not working in IE, but in other Browsers is that those other Browsers might already have parsed a part of the DOM and therefore the call to showCurrentMenu works.

But that could just as well break, since from a technical point of view the document is not guaranteed to be loaded, to fix that you have to assign the actual function reference to window.onload by doing:

window.onload = init;