The more I work with JavaScript the more I enjoy it. One of the things I like best is that it is a front-end language where you generally don’t have to worry about cross-browser compatibility. It usually just works…

Usually…

This one tripped me up and it took me a while to pin down what the problem was. Turns out the variable name “class” is reserved in IE but not in other browsers (Firefox/Chrome).

My code used a variable to insert a css class onto an element, something like:

var class = "blue";
element.innerHTML = "<span class='" + class + "'>comment</span>";

I think this is because IE allows you to reference the css class of an object through this attribute, rather than using the “className” attribute.

I guess this is another example of IE trying to make our lives “more compatible” but actually making it hard work for everyone.

I also discovered IE8’s new debugger during this time though which actually tells you where your JS errors lie, rather than just saying “Line 1 character 2342”.

Finally something to make a developer’s life easier in IE!