Checkbox onclick

Hi guys, sorry, I couldnt think of a better name for the title of this post.
I have the following function:

HTML Code:

---

    var theChecks = document.getElementsByTagName('input');
    var i;
    for(i = 0; i < theChecks.length; i++)
    {   
        if(theChecks[i].type == "checkbox")
        {
            var thisCheck = theChecks[i];
            thisCheck.onclick = function()
            {
                if(thisCheck.checked){
                    alert("checked");
                }
                else
                {
                    alert("unchecked");
                }           
            }               
        }           
    }

---

What I am ultimately trying to achieve, is run a function when the checkbox is first checked, and then run a different function when the same checkbox is unchecked. At the moment, the "unchecked" alert shows on check AND uncheck.

Could somebody please let me know what I am doing wrong in the code ?

D

Does the same thing happen when you click on the last checkbox?

Try replacing

Code:

---

                if(thisCheck.checked){

---

with

Code:

---

                if(this.checked){

---

Perhaps there's a problem with using that function's variable inside the onClick function. I'm thinking that the function will run independently of your piece of code, in which case thisCheck would no longer exist, or at least be set as the last checkbox on the page (ie the last one in the loop).

Quote:

---

Originally Posted by dmsuperman

Try replacing

Code:

---

                if(thisCheck.checked){

---

with

Code:

---

                if(this.checked){

---

Perhaps there's a problem with using that function's variable inside the onClick function. I'm thinking that the function will run independently of your piece of code, in which case thisCheck would no longer exist, or at least be set as the last checkbox on the page (ie the last one in the loop).

---

This definitely is a fix but I'm not satisfied with the explanation :).

If anyone's wondering how badly I need to get some sleep: I spent 45 minutes working with this problem and following a trail of prior solutions.

Here's the solution:

General notes:

1) The first note is that for this particular situation, using 'this' works well. It wasn't necessary to define a variable outside of the anonymous function.

2) In cases where it is necessary to define a variable outside the function and access it within, this might be useful.

Obligatory preface:

JavaScript supports a powerful feature known as closures. This simply means that a function is bounded to its lexical environment. In other words, a function knows about the variables outside its scope.

Back to the show:

So in this case, the anonymous function does know about thisCheck. Try it for yourself by alerting thisCheck. Or better yet, assign an ID to each checkbox, and then alert the ID. You'll see that the last checkbox is alerted each time.

So what's the problem? When JavaScript is forming the closure between the event handler and thisCheck, it is only saving the -reference- to thisCheck. It isn't copying the value.

This means, that each of your checkboxes hold their own references to the same value.

How can this be solved? You need to save a new copy of thisCheck to each new event handler.

Here's how you do it:

Code:

---

var theChecks = document.getElementsByTagName('input');
var i;
for(i = 0; i < theChecks.length; i++) {   
        if(theChecks[i].type == "checkbox") {
                var thisCheck = theChecks[i];
                thisCheck.onclick = (function() {
                        var saveCheck=thisCheck;
                        return function() {
                                if (saveCheck.checked) {
                                        alert("checked");
                                } else {
                                        alert("unchecked");
                                }           
                        }
                })();
        }           
}

---

The basic idea is that we are creating a function that returns a function... which is executed immediately. Within the function we are creating a new reference to thisCheck as saveCheck, and then a closure is formed between the new reference and the inner inner function. Because saveCheck is a local variable to a newly created function, there is a new thisCheck reference for each function. The code should work.

Again, is this worth the effort? Absolutely not. Could it be useful in another situation? Sure ;)

Some of my research and good reading to fully understand the problem (the simplest problems can be deceiving):

About the closure "gotcha"
A similar problem
The original link. Note: The author's reasoning isn't correct. The other articles explain this further.

Happy coding.

Synotic, that you very much for your detailed explanation, although Supermans suggestion actually works perfectly for me. Superman, thanks!

synotic, so it took you less than an hour to figure out closures? Congratulations. :) This is indeed a common problem.

I was going to use my question as a lead in to posting a link to an explanation of them, e.g. http://blog.morrisjohns.com/javascri...s_for_dummies/.

Quote:

---

Originally Posted by Kravvitz

synotic, so it took you less than an hour to figure out closures? Congratulations. :) This is indeed a common problem.

I was going to use my question as a lead in to posting a link to an explanation of them, e.g. http://blog.morrisjohns.com/javascri...s_for_dummies/.

---

Kravvitz: No. :) I thought I already understood them, but I didn't realize that it was merely the variables/references that were being bound to the scopes. Which in retrospect makes perfect sense and solves a lot of the problems I've been having. Shows that you are always learning. I'll take a look at your link.

Also, if anyone wants a marathon-of-an-article about closures that will leave you out of breath: JavaScript closures by Richard Cornford. It goes deep down and shows the beauty of how everything in JavaScript really is an object and how closures are really concrete objects that are properties ([[scope]]) of their functions/execution contexts.