Set click attribute, which calls a prototyped method in javascript constructor

Question

*Although I can see the similarities, the question referenced as a duplicate is regarding binding click events to objects within objects via a callback. My question is regarding binding click events to properties of an object. So while similar, I was not able to apply the information in that question to my question; however, I was able to apply the information received here to solve my problem. And lastly, as there are often several ways to solve similar problem, I think the community could benefit by keeping both questions up since two distinctly different solutions are provided to two similar but different questions.

I have a card object with a contstructor that looks something like this...

function cardObj(params){
    this.id = params.id;        

    this.card = document.createElement('div');
    this.itemBody = document.createElement('div');
    this.footerContainer = document.createElement('div');

    this.card.appendChild(this.itemBody);
    this.card.appendChild(this.footerContainer);

}

Then I'm trying to prototype some methods because I'm going to have possibly several hundred cards on the page...

cardObj.prototype.toggleDescription = function (){
    // do some stuff

};

The problem:

I can't seem to set get onclick to work on any of the object properties. I've tried something like...

(within the cardObj constructor)

this.footerContainer.click = function(){this.toggleDescription();};

And I've also tried (in my programs main program function)...

cardArr[x] = new cardObj(params);
parentDiv.appendChild(cardArr[x].card);
cardArr[x].footerContainer.click = function(){this.toggleDescription();};

And I'm getting various "toggleDescription is not a function" and "this.toggleDescription" is not defined errors.

I'd like to set the click attribute within the object constructor somehow if possible as I'd like to keep this completely modular so I could, for instance, simply copy and paste my cardObj.js file into another program and have it all just work with me only needing to pass some parameters to the constructor. Is this possible? Where am I going wrong?

Well it should be onclick and not click and you really should be using addEventListener. — epascarello, May 04 '15 at 18:11
for `"toggleDescription is not a function"` you should bind the onclick listener since you are using `this` within the function. — Dhiraj, May 04 '15 at 18:14

score 1 · Accepted Answer · answered May 04 '15 at 18:16

1

Bind the context when you add the event:

function cardObj(params){
    this.id = params.id;        

    this.card = document.createElement('div');
    this.itemBody = document.createElement('div');
    this.footerContainer = document.createElement('div');

    this.card.appendChild(this.itemBody);
    this.card.appendChild(this.footerContainer);

    this.footerContainer.addEventListener('click', this.toggleDescription.bind(this));
}

answered May 04 '15 at 18:16

Malk

11,855
4
33
32

This seems to be pretty close to the functionality I'm looking for. One thing, however, which I didn't note in my question, is how can I pass an argument using this method. For example, I'd like to pass this.id to the toggleDescription function. this.footerContainer.addEventListener('click', this.toggleDescription.bind(this.id)); ...is passing the mouse event. – Mike P May 04 '15 at 18:25
You would not need to pass `this.id` as it would be available to `toggleDescription` anyway. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind – Malk May 04 '15 at 18:30
Ah, ok I see what's going on. Thanks! Exactly what I was looking for. And I learned a little something. – Mike P May 04 '15 at 18:37

Set click attribute, which calls a prototyped method in javascript constructor

1 Answers1