Javascript “this” reference for onclick event not working

Question

I'm trying to call a function with the "onclick" event as so:

<td id="A1" onclick="move()" class="white"></td>
<td id="A2" onclick="move()" class="painted bp"></td>
<td id="A3" onclick="move()" class="white"></td>

In the function itself, i refer to "this":

function move(e){
    var myId = this.id;
    alert("myId");
}

When I run the whole thing, the alert says 'undefined'. When I try alert(this) I get [object window]. I'm working with IE9, btw. Thanks

Answer 1

When calling a function from an event handler, its this isn't set by the handler (though you can pass this from the handler per Xdazz's answer, or set this per Kyle's answer). Another approach is to extract the sender element from the event object associated with the event:

function move(e) {
    if (!e)
        e = window.event;
    var sender = e.srcElement || e.target;

    //maybe some nested element.. find the actual table cell parent.
    while (sender && sender.nodeName.toLowerCase() != "td")
        sender = sender.parentNode;

    var myId = sender.id;
    alert(myId);
}
​

You also must pass the event explicitly:

onclick="move(event)"

Note that when the table cell has nested elements they will be the "sender" thus to grab the desired element (which is the table cell) you have to traverse upwards. To avoid all this headache see below how to attach the handlers through code.

Live test case.

That said, better practice would be to bind the click event through code instead of inline - don't mix HTML with JavaScript. To achieve this, have such code:

window.onload = function() {
    var arrCells = document.getElementsByTagName("td");
    for (var i = 0; i < arrCells.length; i++) {
        var oCell = arrCells[i];
        if (oCell.id && oCell.id.substr(0, 1) == "A") {
            oCell.onclick = move;
        }
    }
}

With the above code in place, you can remove the inline onclick= calls from the HTML and keep your original function - the this will point to the clicked table cell.

Updated fiddle.

Answer 2

this is the window object in your code.

You could pass this as the parameter.

<td id="A1" onclick="move(this)" class="white"></td>

then:

function move(ele){
    var myId = ele.id;
    alert("myId");
}

Answer 3

<td id="A1" onclick="move.call(this)" class="white"></td>

Now this will refer to the td element in your move function.

Answer 4

Try using the event target instead to get the dom element you are looking for:

function move(e) {
  alert(e.target);
}