CODEWITHSUNDEEP
javascriptjquery
Jezen Thomas
Jezen Thomas

Reputation: 13800

JavaScript global variables not updating

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 rollDown() function, although I'm using id++, my global id variable is not being updated (as shown in logs).

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

Here's the relevant 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 + ' & id: ' + id);
    if (id <= items) {
        if (id === 0) {
            $('#toggle').html('Hide &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 &darr;');
}

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

Here is what my console prints out:

items: 6 & id: 0
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 & id: 1
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 & id: 2
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 & id: 3
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 & id: 4
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 & id: 5
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 & id: 6
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============
items: 6 & id: 7
herp derp
id: 0
-----
animSpeed: 410
-----
animDelay: 20
-----
working: 1
==============

Upvotes: 0

Views: 1880

Answers (2)

Hadas
Hadas

Reputation: 10374

when you get in your function variable with the name id like here :function rollDown(items, id) you run over the global variable.

use:

function rollDown(items){

Upvotes: 0

Alex
Alex

Reputation: 35409

You have id as a parameter defined in the rollDown method signature. If you remove it, your global variable will update properly.

From:

function rollDown(items, id) {

To:

function rollDown(items) {

You may also want to remove items, as that is also defined in the global namespace.

Upvotes: 4

Related Questions