JavaScript global variables not updating
<p>I'm having some logic trouble with a bit of jQuery I'm writing. I suspect I'm doing something wrong with my global variables, but I'm not exactly sure what the problem is. I'm logging everything as it's running, and for some reason, in my <code>rollDown()</code> function, although I'm using <code>id++</code>, my global <code>id</code> variable is not being updated (as shown in logs).</p>

<p>I need to update my global variable so that when I click <code>header &gt; a</code>, the <code>else if</code> statement will run instead of once again firing <code>rollDown()</code>.</p>

<p>Here's the relevant code:</p>

<pre><code>var id = 0;
var animSpeed = 0;
var animDelay = 0;
var working = 0;
var items = 0;

function logs() {
    "use strict";
    console.log('id: ' + id);
    console.log('-----');
    console.log('animSpeed: ' + animSpeed);
    console.log('-----');
    console.log('animDelay: ' + animDelay);
    console.log('-----');
    console.log('working: ' + working);
    console.log('==============');
}

function rollDown(items, id) {
    "use strict";
    var dist = $('li').eq(id).outerHeight(), slideDown = {'margin-top' : '+=' + dist + 'px'};
    console.log('items: ' + items + ' &amp; id: ' + id);
    if (id &lt;= items) {
        if (id === 0) {
            $('#toggle').html('Hide &amp;uarr;');
        }
        $('li').not($('li').eq(id).prevAll()).delay(animDelay).animate(slideDown, animSpeed);
        id++;
        logs();
        rollDown(items, id);
    } else {
        console.log('herp derp');
        logs();
    }
}

function getVals() {
    "use strict";
    animSpeed = $('#speed').val();
    animDelay = $('#delay').val();
}

function resetPosition() {
    "use strict";
    $('li').stop().css('margin-top', 0);
    id = 0;
    working = 0;
    $('#toggle').html('Show &amp;darr;');
}

$(function () {
    "use strict";
    $('header &gt; a').click(function () {
        if (id === 0 &amp;&amp; working === 0) {
            getVals();
            items = $('ul').children().length;
            var z;
            for (z = 0; z &lt; items; z++) {
                $('li').eq(z).css('z-index', items - z);
            }
            working = 1;
            rollDown(items, id);
        } else if (id !== 0) {
            resetPosition();
            alert('!!');
        }
        return false;
    });
});
</code></pre>

<p>Here is what my console prints out:</p>

<pre><code>items: 6 &amp; id: 0
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 &amp; id: 1
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 &amp; id: 2
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 &amp; id: 3
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 &amp; id: 4
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 &amp; id: 5
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 &amp; id: 6
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 &amp; id: 7
herp derp
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
</code></pre>
