Debugging JavaScript for Internet Explorer

[geosite]

I've been working on a page at http://www.politix.us/world/eur/afg/index.php, focusing particularly on some JavaScript functions. I've been previewing it in Firefox, where it looks pretty good (to me, anyway). When I checked it in Internet Explorer, I was horrified.

It was even worse than what you see now. I fixed a CSS bug or two. But the most obvious problem is my "Features" feature. In Firefox, the word "Features" appears in the top right corner of the page. Click it, and it vanishes, replaced by an element that pops open on the opposite side of the page. Kill the JavaScript, and all the JavaScript elements automatically open, with the Features pop-up falling to the bottom of the page.

I don't have a clue about validating, checking or fixing JavaScript. But I clicked "JavaScript Console" on Firefox and got a long list of errors. Actually, it's mostly one error listed over and over and over:

document.getElementById(rest_of_articles[i]) 

This appears to be what it's referring to:

for(var i=0; i < rest_of_articles.length; i++)
{
     document.getElementById(rest_of_articles[i]).className="no_display";
     document.getElementById(more_links[i]).className="display_link";

     document.getElementById(more_links[i]).onclick=more_article;
     document.getElementById(collapse_links[i]).onclick=collapse_article;
} 

Can someone tell me what this means, and advise me how to fix it?

Here's another error that's displayed several times:

Warning: Non-standard document.all property was used. Use W3C standard document.getElementById() instead.
Source File: http://us.js1.yimg.com/us.yimg.com/lib/pim/r/medici/7_31_2/mail/mailcommonlib.js
Line: 13 

I don't have a clue what they're talking about. I noticed still other errors that reference links to other websites. Fortunately, Firefox seems to handle it. I just need to make this work in IE.

Thanks.

[MikeFoster]

Because of the way 'initialize()' is written, the IDs assigned to these arrays must exist:

var rest_of_articles=new Array("rest_of_navfeatures", "rest_of_art1", "rest_of_art2", "rest_of_gov");
var more_links=new Array("more_navfeatures", "more_art1", "more_art2", "more_gov");
var collapse_links=new Array("collapse_navfeatures", "collapse_art1", "collapse_art2", "collapse_gov");

In your html, 'rest_of_gov' is commented out, and 'rest_of_art1' and 'rest_of_art2' do not exist.

Also because of the way 'initialize()' is written, more_links[] and collapse_links[] must have the same number of IDs as rest_of_articles[].

'initialize()' could be rewritten as follows. Now, non-existent IDs will not cause an error (in this function only - i haven't looked any further than this) and the three arrays don't have to be the same length.

function initialize()
{
  var ele;
  for(var i=0; i < rest_of_articles.length; i++) {
    ele = document.getElementById(rest_of_articles[i]);
    if (ele) {
      ele.className = "no_display";
    }
  }
  for(var i=0; i < more_links.length; i++) {
    ele = document.getElementById(more_links[i]);
    if (ele) {
      ele.className = "display_link";
      ele.onclick = more_article;
    }  
  }
  for(var i=0; i < collapse_links.length; i++)
  {
    ele = document.getElementById(collapse_links[i]);
    if (ele) {
      ele.onclick = collapse_article;
    }
  }
}

There are other errors. But let's take care of these first