Calling method inside the same class: Uncaught type error: this.hide_controls is not a function

Question

ECMAScript 6

In html I have button with id="update" and some other control elements with class="control". When I press "Update" button, other controls should disappear.

When I press the "Update" button, I get: "Uncaught type error: this.hide_controls is not a function".

This may help: if I stop at the breakpoint (see "debugger" in the code), then "this" equals to button#update.btn.btn-default.control.

Could you help me call hide_controls method.

class ButtonManager{

    constructor (){
        this.init_main_object_buttons();
    }

    init_main_object_buttons(){
        this._main_object_update_button = $("#update");
        this._main_object_update_button.click(this.update_main_object);
        this._controls = $(".control");
    }

    hide_controls(){

        this._controls.addClass("hide");
    }

    update_main_object(){
        debugger;
        this.hide_controls();
        ...
    }
}

Possible duplicate of [How to access the correct \`this\` / context inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — Felix Kling, Sep 10 '16 at 14:51
Class methods do not autobind. It works exactly the same as in ES5. — Felix Kling, Sep 10 '16 at 14:53

score 0 · Accepted Answer · answered Sep 10 '16 at 14:20

Change this line

this._main_object_update_button.click(this.update_main_object);

to this

this._main_object_update_button.click(this.update_main_object.bind(this));

This will bind the scope of the method call to your current instance. this will equal an instance of ButtonManager just how you'd want it to be.

Calling method inside the same class: Uncaught type error: this.hide_controls is not a function

1 Answers1