Pass contextual variable to onclick event handler as argument

Question

*This is happening inside a larger block of code, in a for loop. See end of post for entire loop.

I've read all of the posts that seem to be about this subject, but I'm still lost.

I'm trying to assign an onclick event to a checkbox. The function being assigned to the onclick event needs to have access to a variable that is available in the scope where the checkbox is defined (idvariable).

var idvariable = parentChildList[i].children[j]["subjectid"];
var input = document.createElement("input");
input.type = "checkbox";
input.value = "";
input.onclick = function () {
   return clicked(idvariable);
};

function clicked(id) {
   alert(id); 
};

I've tried every variation of inline and named functions, but I can't figure out how to give the clicked function access to idvariable. In this example above, the value of that variable is undefined.

Or, if I try it with this way:

var input = document.createElement("input");
input.type = "checkbox";
input.value = "";

var idvariable = parentChildList[i].children[j]["subjectid"];
input.onclick = function (idvariable) {
  return clicked(idvariable);
};

function clicked(id) {
   alert(id); 
};

I get an alert that says [object MouseEvent]. Same with the following where I removed the () from the method name I'm assigning to the onclick event:

var idvariable = parentChildList[i].children[j]["subjectid"];
input.onclick = function () {
   return clicked;
}(idvariable);

function clicked(id) {
   return alert(id); 
};

*entire loop:

    for (var i = 0; i < parentChildList.length; i++) {
        var row = table1.insertRow(-1);
        var cell = row.insertCell(0);
        cell.innerHTML =
            "<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse" + i + "\">" + parentChildList[i]["title"] + "</a></h4>";

        if (parentChildList[i].children.length > 0) {
            var row2 = table1.insertRow(-1);
            var cell2 = row2.insertCell(0);

            var table2 = document.createElement("table");
            table2.className = "collapse";
            table2.id = "collapse" + i;
            cell2.appendChild(table2); 

            for (var j = 0; j < parentChildList[i].children.length; j++) {
                var row3 = table2.insertRow(-1);
                var cell3 = row3.insertCell(0);
                var div = document.createElement("div");
                div.className = "checkbox";

                var label = document.createElement("label");
                label.innerText = parentChildList[i].children[j]["title"];

                var input = document.createElement("input");
                input.type = "checkbox";
                input.value = "";
                input.setAttribute('subj', idvariable);

                var idvariable = parentChildList[i].children[j]["subjectid"];
                alert(idvariable); 
                input.onclick = function () {
                    return clicked(this.getAttribute('subj'));
                };

                function clicked(id) {
                    return alert(id); 
                };

                cell3.style.padding = "0px 0px 0px 10px";
                cell3.style.fontsize = "x-small";

                cell3.appendChild(div);
                div.appendChild(label);
                label.insertBefore(input, label.childNodes[0]);
            }
        }
    }

There's obviously some code that isn't being shown here. I'm guessing you're doing this in a loop, based on the `i` and `j` variables typically used as counters. That's an important detail that would affect answers. — Heretic Monkey, May 13 '16 at 21:44
That's right Mike. I didn't realize that would impact the behavior of this piece of code. — Andrew B Schultz, May 13 '16 at 21:57

score 2 · Accepted Answer · answered May 13 '16 at 21:53

onclick handler receives Event object. If a handler attached as elem.onclick=handler then the element is available inside the handler as this. So this is workaround.

var idvariable = parentChildList[i].children[j]["subjectid"];
var input = document.createElement("input");
input.type = "checkbox";
input.value = "";
input.setAttribute('data-subj', idvariable); 
input.onclick = function () {
   return clicked(this.getAttribute('data-subj'));
};

function clicked(id) {
   alert(id); 
};

Works great! Thanks Alex! – Andrew B Schultz May 13 '16 at 22:10 — Andrew B Schultz, May 13 '16 at 22:10

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

You will have to append the checkbox to some existing element first, using the following code.

 var element = document.getElementById("one").appendChild(input);

Then you can get the parent by using something like the following...

 var x = document.getElementById("someId").parentElement;

where x will contain the parent element.

This link https://stackoverflow.com/a/9418326/886393 is about custom data in an event (custom event). Hope that helps.

Thanks

Paras

edited May 23 '17 at 12:07

Community

1
1

answered May 13 '16 at 21:27

pparas

549
4
13

Thanks for your answer Paras, but I don't think it addresses my question. I'm trying to figure out how get access to a variable inside the onclick event. – Andrew B Schultz May 13 '16 at 21:29
I don't think that's the same scenario either. I don't have a custom event, just assigning a basic function to an onclick event. – Andrew B Schultz May 13 '16 at 21:38

Pass contextual variable to onclick event handler as argument

2 Answers2