How to call prototype function within prototype function onclick event

Question

How can I call prototype function within inside another prototype function onclick event in JavaScript?

function foo(){
    this.table = '';
}

foo.prototype.abc = function(){
    this.table = document.getElementById("tableID");
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () {
                this.xyz(this);
            };
        }
    }
}

foo.prototype.xyz = function(tableCell){
    alert(tableCell.innerHTML);
}

If I just call this tableText function instead of this.xyz it will work fine, but using this.xyz gives error in console this.xyz(this) is not a function

function tableText(tableCell) {
    alert(tableCell.innerHTML);
}

My browser showing error but not JSFiddle JS Fiddle

Thum Choon Tat · Accepted Answer · 2016-11-22 08:56:38Z

1

In this block of code:

table.rows[i].cells[j].onclick = function () {
    this.xyz(this);
};

this represents the td HTML object, not foo. You have to keep a reference of foo and pass it into onclick function, like this:

foo.prototype.abc = function(){
    var that = this; //Keep a reference of `foo`
    this.table = document.getElementById("tableID");
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () {
                //this.xyz(this);
                // "that" refer to the function foo
                // "this" refer to the current table cell (td)
                that.xyz(this);
            };
        }
    }
}

answered Nov 22, 2016 at 8:56

Thum Choon Tat

3,0901 gold badge24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call prototype function within prototype function onclick event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related