Extend onclick function to javascript class

Question

I'd like to include an onclick event in a JavaScript class, but since onclick is a function inside of the class the this variable won't work properly.

How can I modify/output the this variable from the onclick function?

img = new image();

function image() {
    this.width = 400;
    this.height = 600;
    document.getElementById('button').onclick = function()
    {
        alert(this.width); // alerts undefined
    };
}

See JSfiddle here: http://jsfiddle.net/ZghRv/

Store the outer `this` in another variable: http://jsfiddle.net/ZghRv/2/ — bfavaretto, Sep 18 '13 at 03:23
Would I need to use `that` for any subsequent references to `this`? — cbourn, Sep 18 '13 at 03:28
You only need that inside event handlers (inside them, `this` is what originated the event, e.g. the clicked element) — bfavaretto, Sep 18 '13 at 03:31
Just cache `this` to a variable and use it inside the handler. not a good idea to change the context inside the handler for a constant value define outside. — PSL, Sep 18 '13 at 03:33

score 1 · Answer 1 · answered Sep 18 '13 at 03:28

You can use bind() to create a new function that will have this set to the object you pass to bind().

img = new image();

function image() {
    this.width = 400;
    this.height = 600;
    document.getElementById('button').onclick = (function()
    {
        alert(this.width); // alerts undefined
    }).bind(this);  // <---  Add bind() here to pick the value of 'this' inside onclick
}

Check out JavaScript Function bind for more info and interactive examples.

score 0 · Answer 2 · answered Sep 18 '13 at 03:29

0

You can also give reference to the outer this

Updated Fiddle:

http://jsfiddle.net/ZghRv/3/

answered Sep 18 '13 at 03:29

Pal Singh

1,964
1
14
29

Extend onclick function to javascript class

2 Answers2