changing backgroundColor using javascript

Question

This script works fine in all other browsers except IE:

nav.addEventListener('mouseover',function(e) {
        switch(e.target.id) {
            case 'aGallery':
            navOpacity.style.backgroundColor = "red";
            break;
            case 'aContact':
            navOpacity.style.backgroundColor = "green";
            break;
            case 'aAbout':
            navOpacity.style.backgroundColor = "yellow";
            break;
            case 'aHome':
            navOpacity.style.backgroundColor = "#CC33CC";
            break;
        }
    },false);

In IE, the backgroundcolor does not change on hover.

Any ideas?

If possible, I recommend using jQuery. It takes care of issues like this for you, making it work the same in most browsers, including IE. — Brad, Feb 09 '12 at 01:49
Possibly helpful: http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript — Mike Christensen, Feb 09 '12 at 01:55

score 3 · Accepted Answer · answered Feb 09 '12 at 01:51

In IE you have to use attachEvent rather than the standard addEventListener. And use srcElement instead of target for IE.

Try this.

function mouseOverHandler(e) {
        switch((e.target || e.srcElement).id) {
            case 'aGallery':
            navOpacity.style.backgroundColor = "red";
            break;
            case 'aContact':
            navOpacity.style.backgroundColor = "green";
            break;
            case 'aAbout':
            navOpacity.style.backgroundColor = "yellow";
            break;
            case 'aHome':
            navOpacity.style.backgroundColor = "#CC33CC";
            break;
        }
}

if (el.addEventListener){
  el.addEventListener('mouseover', mouseOverHandler, false); 
} 
else if (el.attachEvent){
  el.attachEvent('onmouseover', mouseOverHandler);
}

Some day, we should all get together and form some sort of committee to make browser standards! And all the browsers can follow them! — Mike Christensen, Feb 09 '12 at 03:36

score 1 · Answer 2 · answered Feb 09 '12 at 01:49

1

IE uses the 'on' versions for events, line onclick, onmouseover. There should be your problem.

Also, IE (prior to version 9), does not support addEventListener. You must use attachEvent.

Consider this code as a starting point:

if (el.addEventListener){
  el.addEventListener('click', myFunc);
} else if (el.attachEvent){
  el.attachEvent('onclick', myFunc);
}

answered Feb 09 '12 at 01:49

Sorin Buturugeanu

1,782
4
19
32

Another problem is IE uses `event.srcElement` instead of the W3C standard `target` property. – Mike Christensen Feb 09 '12 at 01:50

changing backgroundColor using javascript

2 Answers2