Adding onclick to input

Question

I have been trying add an onclick event for a set of checkboxes I create via JS but it isn't doing what I expect.

At the end of the script, after it builds the checkboxes within the "checkboxes" div, I expect each box to call the handler with a different argument i. It appears the handlers are all using the current value of i, actually incremented from where it was being used.

What am I missing here ???

    function initialize() {
        console.log("enter initialize");
        console.log("create checkboxes");
        for ( i=0; i<4; i++){

            var span1 = document.createElement('span');
            span1.innerHTML = i;

            var cb = document.createElement('input');
            cb.type = "checkbox";
            cb.name = i.toString();
            cb.onclick = function(){myFunction(i);}
            console.log(i, cb.name, cb.onclick);

            var checkboxes = document.getElementById("checkboxes");
            checkboxes.appendChild(span1);
            checkboxes.appendChild(cb);
            console.log("cb="+cb.toString());       
        }
    }
    function myFunction(b){
        alert(b);

Can you make a fiddle?

royhowie
– royhowie

2014-05-12 00:12:50 +00:00
Commented May 12, 2014 at 0:12 — royhowie
– royhowie, Commented May 12, 2014 at 0:12

Josh from Qaribou · Accepted Answer · 2014-05-12 00:15:38Z

2

This is a pretty common scope problem people have. The issue is that the 'i' value at the time you create the function isn't the same 'i' value that's set when you call the function, so the 'i' every time it gets called will always be 3.

The simplest way around this is to simply grab the value from your 'this' for the element, e.g.:

cb.onclick = function(){myFunction(this.name);}

If you don't want it to be the string name, just set it earlier like so:

cb.counter = i;
cb.onclick = function(){myFunction(this.counter);}

answered May 12, 2014 at 0:15

Josh from Qaribou

6,9182 gold badges25 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gary Schreiner Over a year ago

Got to it before I did. Here's a JSFIDDLE for your answer.

DaveP Over a year ago

Josh, you hit the nail on the head. Thanks

DaveP Over a year ago

Gary, thanks. I've not used JSFIDDLE but it looks like a great resource. Thanks.

Brendan · Accepted Answer · 2014-05-12 00:17:05Z

0

There are still several attributes that cannot be applied by the way you are trying to. So, you will have to use the older .setAttribute method. For example on your cb object. Try instead of .onClick, try this:

cb.setAttribute('onClick','function(){myFunction(i);}');

Hope this helps!

answered May 12, 2014 at 0:17

Brendan

1,4591 gold badge14 silver badges19 bronze badges

Collectives™ on Stack Overflow

Adding onclick to input

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related