Passing One's Self to OnClick Event JavaScript

Question

The on click event that I add to an input in javascript isn't working in the proper manner.
My code so far looks like so:

function order(option) {
    if(option.checked) {
        document.getElementId("col_order").value = document.getElementById("col_order").value + " " + option.value;
    }
}
...//somewhere further down
for(var i = 0; i < options.length; i++) {
    var check = document.createElement("input");
    var label = document.createElement("label");
    var description = document.createTextNode(options[i]);
    check.type = "checkbox";
    check.name = "order_list[]";
    check.value = options[i];
    check.onclick = "order(check)";  //Problem here
    label.appendChild(check);
    label.appendChild(description);
    element.appendChild(label);
}

I have also tried:

check.onclick = (function() { var option = check; return function() {order(option);}})();

The problem that I am having is the check.onlick line of code. When I add this with normal HTML:

<input type = "checkbox" name = "order_list[]" onclick = "order(this)" value = "randVal">randVal</input>

I don't have any problem whatsoever; the method executes with the intended results. Any thoughts?
Let me clarify: I make it to the order function just fine, but I never get into the if statement, even though the checkbox was just clicked

The value of the "onclick" property should be a function, not a string. — Pointy, Jul 10 '14 at 14:43
@danrodi check the bottom of the post now, I added it, sorry! — timtour97, Jul 10 '14 at 14:47
@Pointy that isn't the problem, I make it to the function just fine. — timtour97, Jul 10 '14 at 14:47
Sure, but it *should* be a function, not a string, because that would be a way to make it work (that plus fixing the `.getElementById()` typo). — Pointy, Jul 10 '14 at 15:06

adeneo · Accepted Answer · 2014-07-10T14:54:45.087

2

Use addEventListener instead, and even if it looks like it should work, you're overwriting the same variables on each iteration as there is no closure in for loops, so I would probably add a closure to avoid issues.

For a checkbox you would listen for the change event, not click

for(var j = 0; j < options.length; j++) {
    (function(i) {

        var check = document.createElement("input");
        var label = document.createElement("label");
        var description = document.createTextNode(options[i]);

        check.type = "checkbox";
        check.name = "order_list[]";
        check.value = options[i];

        check.addEventListener('change', function() {
            if (this.checked) {
                var col_order = document.getElementById("col_order");
                col_order.value = col_order.value + " " + this.value;
            }
        }, false);

        label.appendChild(check);
        label.appendChild(description);
        element.appendChild(label);

    })(j);
}

FIDDLE

edited Jul 10 '14 at 14:54

answered Jul 10 '14 at 14:44

adeneo

312,895
29
395
388

Adding the event listener instead didn't help, I could already make it to the function with the code that I had. I don't even get inside the if-statement in the function though, that's where I am confused. – timtour97 Jul 10 '14 at 14:49
@timtour97 - edited the answer, try listening for the change event, and use `this` inside the event handler – adeneo Jul 10 '14 at 14:50
@timtour97 - There's also a typo, you wrote `getElementId`, which is wrong – adeneo Jul 10 '14 at 14:54

score 0 · Answer 2 · answered Jul 10 '14 at 14:43

0

check.onclick = "order(check)"; assigns a String as an on-click handler. That doesn't work; the browser expects a function there:

check.onclick = function() {
    order(check);
}

answered Jul 10 '14 at 14:43

Aaron Digulla

321,842
108
597
820

I make it to the function fine, I never make it inside the if-statement though. – timtour97 Jul 10 '14 at 14:46
use `console.log(check)` to make sure you really have a a checkbox and then `console.log(check.checked)` to see if this is a valid property and what it's value is. – Aaron Digulla Jul 10 '14 at 14:49
The code you posted above looks correct (see http://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events); my guess the bug is elsewhere. – Aaron Digulla Jul 10 '14 at 14:49
When I did so, for just check I received "[object HTMLInputElement]", for check.checked I received "true" and for check.value I got back the value I selected. – timtour97 Jul 10 '14 at 14:52

Passing One's Self to OnClick Event JavaScript

2 Answers2