IE7 error: "Object does not support this property or method"

September 13, 2008 04:26.40 PM

Cross browser development, hooray... When I'm developing a site, whether big idea or small, I want it to work everywhere. I'm not so much the graceful degradation guy due to laziness and I feel that supporting those stuck in the non-JavaScript ages holds back the advancement of technology. I will usually give minimal features so my sites aren't crippled but there's time when I don't go much out of my way. Anyways, that's a completely different rant. What I'm talking about here is the look and feel of the site in the big browsers, IE, Firefox, Safari, and now Chrome. This includes the JavaScript as well. I'm working on this site that displays a Google Map. The initial XHTML rendered uses a CSS style that hides the DIV in case the user has JavaScript turned off. When the body loads, the element is manipulated through JavaScript to change the display of the element to 'block' so it's no longer hidden. This allows users with scripting turned on to enjoy the map feature. Everything was working well in Firefox(my primary browser) and I switched over to Safari(I own a Mac so I get to test these two first) and everything was working very nicely. I then fired up my Dell laptop to test out IE7 and Chrome.

Chrome...works...very, very, very fast. I'm pretty sure Chrome's V8 JavaScript engine is going to work faster with Google stuff so they can monopolize the mashup market once people start downloading their browser more. Anyways, it worked awesome so I moved on.

IE7...no luck. The map was nowhere to be found. Since I program to IE6(don't ask) at work, I've become accustomed to noticing the little annoying yellow triangle noting a scripting error on the page load. I immediately open it up and got a horrible error message from the folks at Microsoft; "Object does not support this property or method." I did some research and found a few people who had the same issue as me. I checked out my JavaScript code and everything looked fine. The line it was crashing on was here:

mapWrap = document.getElementById("mapWrap");

Solution: variable names cannot be the same as the DOM element name. I changed the JS variable to mapWrapDiv and it worked...lame Since IE7 treated the DOM element as the variable, my next line of code to change the style caused the exception seen above. Lesson of the day, use the standard of DOM element ID + type of XHTML element name for your JavaScript variables.