IE issue changing div content

[andrewsmd]

I have a selector where you pick an item and it changes the innerHTML of a div. This selector works using an image map. Esentially, I have 3 areas you can click within the map. Depending on the area you click, the HTML get's changed inside of a div. This is working fine in most browsers. Even some IE browsers it works completely fine. However, in some IE 9 browsers, it doesn't work. I get a weird error and the strange thing is, if you refresh the page, it works just fine. Any ideas? Heres the error I get from IE's console.
SCRIPT438: Object doesn't support this property or method
Social-Advertising-And-Viral-Campaigns.html, line 1 character 1
And I should note line 1 of my document is my doctype.
Here's the relevant JS and html

first I create some hidden divs with the content
<div id="services1" style="display: none;">
content 1
</div>
<div id="services2" style="display: none;">
content 2
</div>
<div id="services3" style="display: none;">
content 3
</div>

Then I have the div where the content is shown
<div id="selectorDiv">
</div>

Now, in my image map, depending on where they click, I call my function in an external JS file to fade in the text
<map name="Map">
<area shape="rect" coords="10,28,269,81" href="javascript:selectorClick('servicesFirstBorder.png', 'services1');">
<area shape="rect" coords="10,81,269,135" href="javascript:selectorClick('servicesSecondBorder.png', 'services2');">
<area shape="rect" coords="10,134,269,187" href="javascript:selectorClick('servicesThirdBorder.png', 'services3');">
</map>

This function changes the background image of my container div (imageRotator) and then calls the function to fade in the text
function selectorClick(id, idText) {
$("#imageRotator").stop(true, true);
$("#imageRotator").attr("src", "../images/" + id);
$("#imageRotator").blur();
fadeInSelectorText(idText);

}//selectorClick
function fadeInSelectorText(id) {
var obj = document.getElementById(id);
var html = "";
html = obj.innerHTML;
$('#selectorText').fadeOut("fast", function () { $(this).html(html).fadeIn(1000); });
}//fadeInSelectorText

I can provide a link to this actual page, if anyone wants

[lucy24]

Do you ever read the html or css forums? There's a standard bit of advice that fits in really well here.

Strip your code down to the absolute minimum. Then start adding one thing at a time so you can pinpoint exactly where it breaks. Here you've got several different things that the browser might object to-- image maps, the "href = 'javascript:blahblah'" construction, the change of style from no-display to display, the innerHTML format ... et cetera. That's just picking things at random. I don't mean things that a browser should object to. They're simply things that a browser might decide it didn't like, and who are we to argue.

Are the three selectively-visible divs all in the same place? Can more than one be visible at the same time?

Are the two lower parts of the map intended to overlap by one px or was that a typo?

Oh, and it never hurts to stop by caniuse dot com and make sure everything you've got is supported.

[Fotiman]

In IE go to Tools > Internet Options, select the Advanced tab and in Settings make sure "Disable script debugging (Internet Explorer)" is not checked. Now when you get an error, you should get a dialog asking if you want to debug this page and you can use the built-in script debugger in Internet Explorer which should show you the exact line of code that caused the problem and you can examine local variables and add a Watch to a variable. That should help you find where the problem is.

[edited by: whoisgregg at 5:04 pm (utc) on Dec 28, 2012]
[edit reason] fixed filter error [/edit]