Setting Onclick To Every Instance Of A Custom Object And Passing A Property To A Function

I'm creating a product customizer with HTML, CSS and Javascript, and I've set up a custom object called 'Component.' I'm creating a new instance of Component with the 'new' keyword

Solution 1:

The problem with your first line is that, in javascript, when a function is not called as method (myObj.myFunc()) the 'this' variable is not bound to the the object context the function was declared in, it is rather bound to the global object.

In your case 'this' is bound to the triggering HTML element - as it is always the case with DOM events (such as onclick).

'component' should actually give you the HTML element that triggered the click.

The problem with the second line is that you execute the function and assign the result to the onclcik handler.

What you want to do in order to fix the first line is the following:

that = this;
this.element.onclick = function(){
  selectUnselect(that);
};

The reason it works is that although the function isn't bound to 'this' of the object context it was declared in, all other variables of the object context the function was declared in are visible to it.