Javascript, Calling functions from another onclick in object constructor

Question

I need help calling the this.load function from inside the thediv.onclick. I stripped out most of the code so its really basic, but I really can't find a way to do it. Here is what I currently have:

function CreatePizza(Name, Toppings) {
  this.n = Name;
  this.t = Toppings;
  this.load = function loadpizza() {
    //function that i want to be called
  }

  this.create = function button() {
    var thediv = document.createElement("div");
    thediv.onclick = function() {
      // Call this.load function here
    }
  }
}

What happens if you just call this.load() inside of the thediv.onclick function? — Matthew Herbst
– Matthew Herbst, Commented Jan 27, 2016 at 16:32
@MatthewHerbst because the function gets it's own context, the this value will have changed. Simply assign it to a variable and call it from that variable. — somethinghere
– somethinghere, Commented Jan 27, 2016 at 16:34
@somethinghere I know - I wanted OP to show us he was trying so he could learn :) — Matthew Herbst
– Matthew Herbst, Commented Jan 27, 2016 at 16:37
@MatthewHerbst Sorry about that then, but to be honest, if you read your comment again it does sound an awful lot like a genuine question and not a brain-teaser :) — somethinghere
– somethinghere, Commented Jan 27, 2016 at 16:38

deceze · Accepted Answer · 2016-01-27 16:35:44Z

6

The problem is that inside the onclick handler, this will refer to the <div>, not the other this which you refer to repeatedly.

Two possible solutions:

Save a reference to your desired this:

that = this;
thediv.onclick = function () {
   that.load()
};

Bind this to your function:

thediv.onclick = function () {
    this.load();
}.bind(this);

Or, if that's the only thing you're doing in that function anyway:

thediv.onclick = this.load.bind(this);

answered Jan 27, 2016 at 16:35

deceze♦

525k89 gold badges807 silver badges954 bronze badges

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

3 Comments

Nick Zuber Over a year ago

Good answer for showing both of the two main ways to solve this common problem.

somethinghere Over a year ago

Good answer, I forgot about the binding here. It wasn't immediatly the issue, but I guess it's next on the list after solving this :)

benni515 Over a year ago

Thank you so much, really nice awnser!

somethinghere · Accepted Answer · 2016-01-27 16:33:11Z

2

Because of closures, you can simply assign this to a variable and call it from that!

function CreatePizza(Name, Toppings) {
  var self = this;
  this.n = Name;
  this.t = Toppings;
  this.load = function loadpizza() {
    //function that i want to be called
  }
  this.create = function button() {
    var thediv = document.createElement("div");
    thediv.onclick = function() {
      self.load();
    }
  }
}

I would like to mention that a nicer - and not necessarily better, before anyone starts a flamewar - way to attach events to your div (and more elegant in my opinion) is to use thediv.addEventListener('click', self.load, false). Just a side-note, though.

answered Jan 27, 2016 at 16:33

somethinghere

17.5k2 gold badges36 silver badges48 bronze badges

Comments

gen_Eric · Accepted Answer · 2016-01-27 16:33:24Z

1

Backup the this object before binding the event.

this.create = function button() {
    var that = this,
        thediv = document.createElement("div");

    thediv.onclick = function() {
        // Call this.load function here
        that.load();
    }
}

answered Jan 27, 2016 at 16:33

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Comments

Pabs123 · Accepted Answer · 2016-01-27 16:33:58Z

0

function CreatePizza(Name, Toppings) {
  this.n = Name;
  this.t = Toppings;

  var foo = function loadpizza() {
    //function that i want to be called
  };


  this.load = foo;
  this.create = function button() {
    var thediv = document.createElement("div");
    thediv.onclick = function() {
      foo();
    }
  }
}

edited Jan 27, 2016 at 16:33

answered Jan 27, 2016 at 16:32

Pabs123

3,43315 silver badges30 bronze badges

2 Comments

somethinghere Over a year ago

I think you mean this.load = foo and not foo() as that will call your function.

Pabs123 Over a year ago

actually reading @Sprotte's answer I think I misunderstood the question, I will leave this up just in case however

Ivan Frolov · Accepted Answer · 2016-01-27 16:34:41Z

0

function CreatePizza(Name, Toppings) {
  this.n = Name;
  this.t = Toppings;
  this.load = function loadpizza() {
    //function that i want to be called
  }
  var self = this;
  this.create = function button() {
    var thediv = document.createElement("div");
    thediv.onclick = function() {
      self.load()
    }
  }
}

answered Jan 27, 2016 at 16:34

Ivan Frolov

1036 bronze badges

Collectives™ on Stack Overflow

Javascript, Calling functions from another onclick in object constructor

5 Answers 5

3 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related