Question

I feel like what I have is correct code, but obviously I am missing something here.

What I am trying to do is create an event method in the prototype object of my constructor. Here is what I have so far:

function Controls(but) {
    this.but = document.getElementById(but);
    this.but.onclick = function() {
        displayMessageTwo();
    }
}

Controls.prototype.displayMessageTwo = function() {
    alert("HELLO");
}

var Main = new Controls('testingTwo');

My logic here is that I am creating a constructor from which to build controls for something (let’s say a slideshow).. this.but equals the html element of a link called whatever is passed as an argument to the constructor.

In my prototype object, I define my method and then create my object. However, this is not working as I had expected.

What am I doing wrong here?

Answer 1

I suspect that when the event handler fires, the context of the invocation is not the instance on which you registered the callback.

Try something like the following

function Controls(but) {
    var that = this;
    this.but = document.getElementById(but);
    this.but.onclick = function() {
        that.displayMessageTwo(); // that is closed-in
    }
}