Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript "this" reference for onclick event not working

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

like image 606
Tomcatom Avatar asked Oct 10 '12 13:10

Tomcatom


People also ask

When to use this in JavaScript?

“This” keyword refers to an object that is executing the current piece of code. It references the object that is executing the current function. If the function being referenced is a regular function, “this” references the global object.

Why is button not working JS?

That probably means the file you are specifying in your src is not in the same folder as your html file or you named the function something else in the . js file.

What is this in a function?

The this keyword refers to different objects depending on how it is used: In an object method, this refers to the object. Alone, this refers to the global object. In a function, this refers to the global object. In a function, in strict mode, this is undefined .

What is event in Onclick?

The onclick event executes a certain functionality when a button is clicked. This could be when a user submits a form, when you change certain content on the web page, and other things like that. You place the JavaScript function you want to execute inside the opening tag of the button.


3 Answers

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");
}
like image 125
xdazz Avatar answered Sep 29 '22 16:09

xdazz


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.

like image 30
Shadow Wizard Hates Omicron Avatar answered Sep 29 '22 14:09

Shadow Wizard Hates Omicron


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

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

like image 38
Kyle Avatar answered Sep 29 '22 15:09

Kyle