How can I access two "this" in a javascript member function

Question

Please have a look of the following code snippet,

I have a method someFunc of the Javascript class someClass

Inside the onclick handler of the btn variable inside the method definition, I want to get a reference to the SomeClass and the button both.

SomeClass.prototype.someFunc = function(){

    var btn = document.crealeElement("button");
    btn.onclick = function() {
       this.somePropertyOfSomeClass = true; //this works, because bind
       this.classList.add("active"); //this does not
    }.bind(this);
}

I know, if I use bind(this) then the this variable inside the click handler refers to SomeClass, and without bind, it refers to the button element.

My problem is: How to get both? Because I want to some properties of the class SomeClass inside the handler

What's wrong with using btn.classList...?

Ben Fortune
– Ben Fortune

2018-09-06 09:18:22 +00:00
Commented Sep 6, 2018 at 9:18 — Ben Fortune
– Ben Fortune, Commented Sep 6, 2018 at 9:18
@BenFortune didn't know we can do that too! Thanks

Anand Singh
– Anand Singh

2018-09-06 09:20:10 +00:00
Commented Sep 6, 2018 at 9:20 — Anand Singh
– Anand Singh, Commented Sep 6, 2018 at 9:20

nanobar · Accepted Answer · 2018-09-06 09:47:55Z

3

It's better and more modern practice to access the element (target) or current element the event is bubbling through (currentTarget). Using this is unclear inside a class for anything other than the class instance. Also it's better to use an event listener so multiple events can be attached of the same type.

SomeClass.prototype.someFunc = function(){
    const btn = document.crealeElement("button");
    btn.addEventListener('click', (event) => {
       this.somePropertyOfSomeClass = true; //this works, because arrow function has lexical scope
       event.target.classList.add("active"); // proper way to access the element
    }
}

Also you might want to take a look at ES6 classes.

answered Sep 6, 2018 at 9:47

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

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

Comments

TheOneAndOnly Official · Accepted Answer · 2018-09-06 09:21:47Z

1

Just save the context in the outside function:

SomeClass.prototype.someFunc = function(){
   let _this = this;
   var btn = document.crealeElement("button");
   btn.onclick = function() {
      _this.somePropertyOfSomeClass = true; //saved context
      this.classList.add("active");
   }
}

answered Sep 6, 2018 at 9:21

TheOneAndOnly Official

133 bronze badges

Comments

vinoth s · Accepted Answer · 2018-09-06 09:23:25Z

1

Replace this code this.classList.add("active"); to btn.setAttribute("class", "active");

 SomeClass.prototype.someFunc = function(){

    var btn = document.crealeElement("button");
    btn.onclick = function() {
       this.somePropertyOfSomeClass = true; //this works, because bind
      btn.setAttribute("class", "active"); //this may be help you
    }.bind(this);
}

answered Sep 6, 2018 at 9:23

vinoth s

1986 bronze badges

Comments

Csaba Benko · Accepted Answer · 2018-09-20 05:36:25Z

1

Something like this should work:

SomeClass.prototype.someFunc = function(){
    var that = this;

    var btn = document.crealeElement("button");
    btn.onclick = function() {
       that.somePropertyOfSomeClass = true; //references of SomeClass because of the closure
       this.classList.add("active"); //this should reference btn
    };
}

Also see @Dominic's post, that is an even better solution.

edited Sep 20, 2018 at 5:36

answered Sep 6, 2018 at 9:15

Csaba Benko

1,1618 silver badges15 bronze badges

Collectives™ on Stack Overflow

How can I access two "this" in a javascript member function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related