Setting onclick to every instance of a custom object and passing a property to a function

Question

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 for each individual component of each product, as they will be manipulated independently based on user input. Each component has a div in the HTML that looks like this:

<div class="component" id="ABC123">
                <div class="checkBox"><div class="checkmark"> </div>  </div>
                <div class="nameLabel"><h4>ABC-123</h4> </div>
                <div class="priceLabel"><h5 id="ABC123-PRICE"></h5> </div>
            </div> <!-- ABC 123 -->

And here is the relevant javascript:

function Component(id, model, htmlid, cost) {
this.id = id;
this.model = model;
this.htmlid = htmlid;
this.cost = cost;
this.element = document.getElementById(htmlid);
this.picture = document.getElementById(htmlid + "-PIC");
this.plabel = document.getElementById(htmlid + "-PRICE");
this.active = false;

//****This is the problem line:****
//this.element.onclick = function() {
//                             selectUnselect(this);
//                          };
//this.element.onclick = selectUnselect(this);
}


// Set: VAR NAME, MODEL, HTML ID, COST
var ABC123 = new Component(ABC123, ABCSeries, "ABC123", 100);
var DEF456 = new Component(DEF456, ABCSeries, "DEF456", 200);
var GHI789 = new Component(GHI789, ABCSeries, "GHI789", 300);


function selectUnselect(component) {
console.log(component);
//Simplified for troubleshooting
}

As far as the components go, I'm going to have about 10 for each of many different products, so I'd like to automate the process rather than writing a line like:

ABC123.element.onclick = function() {
    selectUnselect(ABC123);
    };

for each component. I only included a few components here to give the idea.

The two commented lines of code under the noted "Problem Line" are the two things I've tried -- my goal is to get every added component to pass its variable along to the selectUnselect function when its element (div in the html) is clicked on.

• The first commented line results in the console.log printing out "undefined" any time one of the component divs is clicked on.
• The second commented line prints out every instance of Component correctly, but does so automatically when the page loads, and does not respond to click events.

How can I pass the variable to a function when it's clicked for every instance of Component?

Answer 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.