Method from an object's instance doesn't execute

Question

I'm trying to execute a method that's inside an object when you click a button, but apparently, it doesn't run. What am I doing wrong? I saw the variable "price" on Chrome's console, and it says "undefined" before and after pressing the button.

Javascript code:

function Upgrade () {
    this.buy = function(){
        this.price = 40;
    };
}

var upg = new Upgrade();

var button = document.getElementById("button");

button.onclick = upg.buy;

HTML code:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div>TODO write content</div>
        <button id="button" type="button">Upgrade 1</button>
    <script src='newjavascript.js'></script>
    </body>
</html>

Community · Accepted Answer · 2017-05-23 10:32:13Z

2

This happens because as you are assigning your method directly to the onclick property, it will be fired with this being the DOM element.

You can make it work wrapping it into an anonymous function, so the this keyword will point to your own object.

button.onclick = function() {
    upg.buy();
}

Also, I suggest you to move your method to the prototype of your function.

function Upgrade () {
    this.price = 0;
}

Upgrade.prototype.buy = function() {
    this.price = 40;
}

Assigning it to prototype will make this method shared between all objects of your function, instead of creating a new copy for each one.

Fiddle: http://jsfiddle.net/prVD9/

You can learn more about the this keyword behavior in this question: How does "this" keyword work within a function?

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Nov 2, 2013 at 0:18

Guilherme Sehn

6,79722 silver badges36 bronze badges

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

Comments

Ginden · Accepted Answer · 2013-11-02 00:22:41Z

1

When you assign function to object property, this refers to new object (button in your example).

Use this code instead:

function Upgrade () {
    var that = this;
    this.buy = function(){
        that.price = 40;
    };
}

or:

button.onclick = upg.buy.bind(upg);

I recommend to read MDN - this keyword.

edited Nov 2, 2013 at 0:22

answered Nov 2, 2013 at 0:17

Ginden

5,31537 silver badges73 bronze badges

Collectives™ on Stack Overflow

Method from an object's instance doesn't execute

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related