如何通过属性的 onclick 方法引用 javascript object？

Question

I am creating a Javascript object like so:

function pager(elementId) {
    this.totalPages = 5;
    this.currentPage = 1;

    var nextPageImage = document.createElement("img");
    nextPageImage.src = "img/next.png";

    nextPageImage.onclick = function(){
        if (this.currentPage+1 <= this.totalPages)
        {
            this.currentPage +=1;
        }
    }

    document.getElementById(elementId).appendChild(nextPageImage);
}

I create an instance of the object by passing in the id of a div on the page:

myPager = new pager('pagerDiv');

The problem is that the 'this' inside the onclick function refers to the image itself and not the pager object. I can reference the pager objct by using 'myPager' but that is not very practical.

How can I reference the object from within the image onclick function?

Answer 1

Create a local variable which represents "this" and then use that:

function pager(elementId) {
    this.totalPages = 5;
    this.currentPage = 1;
    var th = this;

    var nextPageImage = document.createElement("img");
    nextPageImage.src = "img/next.png";

    nextPageImage.onclick = function(){
        if (th.currentPage+1 <= th.totalPages)
        {
            th.currentPage +=1;
        }
    }

    document.getElementById(elementId).appendChild(nextPageImage);
}