How do I call a Javascript function outside of another Javascript function?

Question

I have a javascript function that's supposed to toggle an animation when clicked by calling another function outside of it.

function MyFunction(id) {
    var target = document.getElementById(id);
    var on = true;

    this.startMe = function() {
        //animation code
        on = true;
    }
    this.stopMe = function() {
        //animation code
        on = false;
    }
    this.toggleMe = function() {
        if (on) this.stopMe();
        else this.startMe();
    }
    target.addEventListener('click', function() {
        this.toggleMe();
    }, false);
}

The problem lies in the toggleMe and addEventListener functions. "this" refers to the function itself and not the one containing it, which is what I need it to reference. How can I work around this?

Assign the outer this to a variable, e.g. var MyFunctionId = id; and use it inside the addEventListener. — Charlie Schliesser
– Charlie Schliesser, Commented Jan 24, 2014 at 15:38

Arun P Johny · Accepted Answer · 2014-01-24 15:44:45Z

3

The easy fix is to use a closure variable as given below

function MyFunction(id) {
    var self = this;
    var target = document.getElementById(id);
    var on = true;

    this.startMe = function () {
        //animation code
        on = true;
    }
    this.stopMe = function () {
        /animation code
        on = false;
    }
    this.toggleMe = function() {
        if (on) this.stopMe();
        else this.startMe();
    }
    target.addEventListener('click', function() {
        //this refers to the element here not the instance of MyFunction
        //use a closure variable
        self.toggleMe();
    }, false);
}

Another solution is to pass a custom execution context to the callback using $.proxy() - you can use Function.bind() also but not supported in IE < 9

function MyFunction(id) {
    var target = document.getElementById(id);
    var on = true;

    this.startMe = function () {
        //animation code
        on = true;
    }
    this.stopMe = function () {
        //animation code
        on = false;
    }
    this.toggleMe = function () {
        if (on) this.stopMe();
        else this.startMe();
    }
    //use Function.bind() to pass a custom execution context to 
    target.addEventListener('click', jQuery.proxy(function () {
        // this refers to the element here not the instance of MyFunction
        //use a closure variable
        this.toggleMe();
    }, this), false);
}

Also use .click()/on('click') to register the click handler instead of addEventListener

    $(target).on('click', jQuery.proxy(function () {
        // this refers to the element here not the instance of MyFunction
        //use a closure variable
        this.toggleMe();
    }, this), false);

edited Jan 24, 2014 at 15:44

answered Jan 24, 2014 at 15:38

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Cᴏʀʏ Over a year ago

Should be applied within toggleMe() as well, no?

Joseph Webber Over a year ago

Thanks a bunch, I never thought of creating a variable to hold the original function. I'll mark as the answer when available.

Cᴏʀʏ · Accepted Answer · 2014-01-24 15:44:26Z

Simply add another variable with a reference to this but with a different name; then you can use that in your functions.

function MyFunction(id) {
    var self = this;

    var target = document.getElementById(id);
    var on = true;

    this.startMe = function() {
        on = true;
    }

    this.stopMe = function() {
        on = false;
    }

    this.toggleMe = function() {
        if (on) self.stopMe();
        else self.startMe();
    }

    target.addEventListener('click', function() {
        self.toggleMe();
    }, false);
}

My personal preference is to take it even one step further and continue to use self everywhere that makes sense:

function MyFunction(id) {
    var self = this;

    var target = document.getElementById(id);
    var on = true;

    self.startMe = function() {
        on = true;
    }

    self.stopMe = function() {
        on = false;
    }

    self.toggleMe = function() {
        if (on) self.stopMe();
        else self.startMe();
    }

    target.addEventListener('click', function() {
        self.toggleMe();
    }, false);
}

Collectives™ on Stack Overflow

How do I call a Javascript function outside of another Javascript function?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related