Extend onclick function to javascript class [duplicate]

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: jsfiddle.net/ZghRv/2 — bfavaretto
– bfavaretto, Commented Sep 18, 2013 at 3:23
Would I need to use that for any subsequent references to this? — cbourn
– cbourn, Commented Sep 18, 2013 at 3:28
You only need that inside event handlers (inside them, this is what originated the event, e.g. the clicked element) — bfavaretto
– bfavaretto, Commented Sep 18, 2013 at 3: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
– PSL, Commented Sep 18, 2013 at 3:33

nkron · Accepted Answer · 2013-09-18 03:28:05Z

1

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.

answered Sep 18, 2013 at 3:28

nkron

19.8k3 gold badges42 silver badges27 bronze badges

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

Comments

Pal Singh · Accepted Answer · 2013-09-18 03:29:39Z

0

You can also give reference to the outer this

Updated Fiddle:

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

answered Sep 18, 2013 at 3:29

Pal Singh

1,9721 gold badge17 silver badges32 bronze badges

Collectives™ on Stack Overflow

Extend onclick function to javascript class [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related