How to pass a variable by reference to an event handler in JavaScript?

Question

I simulated a class in JavaScript; it's code is here:

function myclass()
{
    this.count ;

    this.init = function(){
        $("div.mybtn").click({n:this},function(e){
            e.data.n.count++;
        });
    }

    this.getCount = function(){
        alert(this.count);
    }
}

Then I created an instance of this class and executed it's method init(), but when I click on any div.mybtn element, it did not increment the value of this.count.
It seems the object this was passed to event handler by value not by reference.
How I can pass a variable to an event handler by reference?

adeneo · Accepted Answer · 2013-07-16 06:08:26Z

4

You can't increment undefined, you have to start somewhere:

function myclass() {
    this.count=0;   // start counting at zero !!!

    this.init = function(){
        $("div.mybtn").on('click', {n:this},function(e){
            e.data.n.count++;
            e.data.n.getCount();
        });
    }

    this.getCount = function(){
        console.log(this.count);
    }
}

var c = new myclass();

c.init()

DEMONSTRATION

edited Jul 16, 2013 at 6:08

answered Jul 16, 2013 at 6:02

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

Barmar · Accepted Answer · 2013-07-16 06:01:19Z

3

Javascript doesn't have pass-by-reference parameters. For what you want, you should use a closure variable:

this.init = function(){
    var self = this;
    $("div.mybtn").click(function(){
        self.count++;
    });
}

answered Jul 16, 2013 at 6:01

Barmar

789k57 gold badges554 silver badges669 bronze badges

Comments

mohkhan · Accepted Answer · 2013-07-16 06:00:49Z

1

You can write a bind function and bind the context with the event handler.

Function.prototype.bind = function(){
    var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();

    return function(){
        fn.apply(object, args.concat(Array.prototype.slice.call(arguments)));
    }
}

function myclass()
{
    this.count ;

    this.clicked = function(){
        this.count++;    
    };

    this.init = function(){
        $("div.mybtn").click(this.clicked.bind(this));
    }

    this.getCount = function(){
        alert(this.count);
    }
}

answered Jul 16, 2013 at 6:00

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to pass a variable by reference to an event handler in JavaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related