javascript: assigning functions as callbacks and variable scope
<p>So, here's the deal. I'm using an onclick event to fire a function so with each click you will toggle between the divs original innerHTML and another variable. It works when I assign testfunction as a callback. Here's the code:</p>

<pre><code>var c = '';

function testfunction()
{
    var a = this.innerHTML;

    var b = 'blah';

    if (a !== b)
    {
        c = a;
        return this.innerHTML = b;
    }
    else
    {
        return this.innerHTML = c;
    }

    window.onload = function()
    {
         document.getElementById('rightcontent').onclick = testfunction;
    }
</code></pre>

<p>I understand that the c retains it's value because of it's global scope. But what I don't understand is why c comes back undefined when I put the function into an anonymous callback as such:</p>

<pre><code>    windows.onload = function()
    {
    document.getElementById('rightcontent').onclick = function()
    {
         this.innerHTML = testfunction();
    }
    }
</code></pre>

<p>There isn't a point to any of this, I'm just messing around...but I would like to know what's happening under the hood. </p>

<p>Sorry if this is covered elsewhere, I have looking through some posts to find my answer, but I can't find it. </p>

<p>Thanks in advance :-)</p>
