Help! My mootools script doesn't work in IE!

Today I went through the pain of installing Windows XP. On QEMU. I wanted to do some JavaScript debugging for mootools. It turned out that IE was just a little picky about list formatting.

Whenever you list things, IE scripting breaks if you add a comma behind the last element. It's probably incorrect to add a comma and the examples at docs.mootools.net are all correct. But it surprised me nonetheless as IE lets terribly broken HTML pass and other browsers are more forgiving. Anyway, fixing sloppy code is always a good thing.

This won't work in the Internet Explorer I tested:


window.addEvent('domready', function() {
    var elements = $('sidebar').getElements('a');
    elements.each(function(item, index) {
        var elem = $(item);
        elem.addEvents({
            'mouseenter': function() {
                elem.setStyle('background-color', '#ccf');
            },
            'mouseleave': function() {
                var myFx = new Fx.Tween(elem, {
                    duration: 250,
                    link: 'ignore',
                    transition: 'sine:out',
                });
                myFx.start('background-color', '#ccf', '#eef');
            },
        });
    });
});

(Errors on lines 13 and 16)This will work:


window.addEvent('domready', function() {
    var elements = $('sidebar').getElements('a');
    elements.each(function(item, index) {
        var elem = $(item);
        elem.addEvents({
            'mouseenter': function() {
                elem.setStyle('background-color', '#ccf');
            },
            'mouseleave': function() {
                var myFx = new Fx.Tween(elem, {
                    duration: 250,
                    link: 'ignore',
                    transition: 'sine:out'
                });
                myFx.start('background-color', '#ccf', '#eef');
            }
        });
    });
});

Some day I may read through the JavaScript specs and find out if this behaviour is to be expected. Another resource I haven't gone through yet is this excellent post at the mootools blog.
If you're interested in debugging JavaScript for IE you should read this How to debug JavaScript in IE as well.

Published on Sept. 22, 2008 at 9:37 a.m. by Nicolas and tagged mootools, JavaScript, Webdesign. You can follow the discussion with the comment feed for this post.

2 comments

ithcy wrote this comment on Oct. 22, 2009, 5:15 p.m.

It is to be expected. You're essentially creating an invalid object structure with those commas. Firefox and other browsers forgive this, but this is a well-known (and technically correct) IE behavior to break this way.

Reply to this comment
- Nicolas wrote this comment on Oct. 23, 2009, 9:51 a.m.
  
  Yes, I understand that today. It's just that one year ago I started doing serious JS and well, JS is just not easy to debug. Firefox should indeed break on incorrect syntax, Firebug makes my life so much easier. I don't think Firefox even generates warnings, would have to check that.
  
  Reply to this comment