IE: onclick function doesn't work with 'this'

Question

OK, so I have a strange JS function problem for IE versions 8 and below. (who'd have guessed)

there's this function defined in the 'script' section of my page, it's supposed to change the background color of a node element on click:

function highlight(){
    if (this.style.backgroundColor != "rgb(163, 167, 334)"){
        this.style.backgroundColor = "rgb(163, 167, 334)";
    }
}

basically, it's saying 'if it's not the given backgroundColor, make it that backgroundColor.'

In order to evoke the method, the same 'script' tag also contains:

button.attachEvent('onmousedown', highlight);

for some reason, I continually get the following error in the >IE9's developer tools console (running ie9 in compatibility mode as 'ie8'):

SCRIPT5007:unable to get value of the property 'backgroundColor': object is null or undefined

I'm using 'attachEvent' in IE8 in the same way I'm using 'addEventListener' in Firefox, Chrome, and IE9. Unfortunately it seems to not behave in quite the same way.

I need this because my client insists on using IE8.

Any suggestions?

---

EDIT/SOLUTION FOUND: The problem was found. Highlight function references 'this'. When attachEvent fires it always understands 'this' as meaning 'the browser window', NOT the object that receives the action. To circumvent this problem, there are two ways:

element.onevent = function; (in my case: button.onclick = highlight)

element[onevent] = function; (in my case: button[onclick] = highlight)

Regarding the second variant, it's a bonus thing discovered (keeping this here for anyone stumbling). I'll just share it here: a click event can actually be triggered by writing obj[onclick] = func. (in my case that was: "button[onclick] = highlight;" this is useful because it allows 'passing in' an event's name when necessary.

---

Thanks everyone for your help! Case closed.

Answer 1

Probably going to want to go with feature detection

if (button.addEventListener){
 button.addEventListener( 'onmousedown', highlight, false );
}else if (button.attachEvent) {
 button.attachEvent( 'onmousedown', highlight );
}

This should properly register the event giving access to this. However, if this is still undefined, you may need to access the event object in ie.

function highlight(ev){
 if( typeof(ev) == "undefined" ){
  ev = window.event;
 }
 var target = ev.target || ev.srcElement;
 if (target.style.backgroundColor != "rgb(163, 167, 334)"{
  target.style.backgroundColor = "rgb(163, 167, 334)";
 }
}

Answer 2

Clearly an odd scope-issue. Consider declaring a variable to access instead of this (difficult to show in practice when we dont know the markup) :

var hl = document.getElementById('highlight');

and

function highlight(){
  if (hl.style.backgroundColor != "rgb(163, 167, 334)"{
    hl.style.backgroundColor = "rgb(163, 167, 334)";
  }
}

this.style.backgroundColor are refering to the context, your function. And that function does not have a style.backgroundColor, but the element you attach to that function, by onmousedown probably has. Another solution is to do :

document.getElementById('theElementInQuestion').onmousedown = function() {
  if (this.style.backgroundColor != "rgb(163, 167, 334)"{
    this.style.backgroundColor = "rgb(163, 167, 334)";
  }
}

Answer 3

I would use JQuery for this as it has excellent cross browser support. I've using $("#button") which finds an element with id="button" but you could use class=".buttonClass" if you wanted to bind more elements at one time.

$("#button").click(highlight);

function highlight() {
    if (this.style.backgroundColor != "rgb(163, 167, 334)") {
        this.style.backgroundColor = "rgb(163, 167, 334)";
    }
};

I've tested this in several browsers including IE8 and it works fine.

Answer 4

function highlight(){
if (this.style.backgroundColor != "rgb(163, 167, 334)"{
    this.style.backgroundColor = "rgb(163, 167, 334)";
}}

You are missing a ")" to close the if's condition.