Why can't I increment global variable

Question

I created a variable q outside of any function. From within my function I am attempting to simply increment it with a ++. Will this increment the global q or is this simply appending the value to a local variable? As you can see in the code sample below I am attempting to use the value of the global variable (which I intend to be updated during each execution of this script) to set a variable which should trigger this function via .change. The function is initially trigger (when q = 1) however it is not trigger when a selection is made from the dropdown box with id = "selectedId2" which is leading me to believe that q has retained a value of 1 though I successfully incremented it when the function was ran prior. Any advise of how I can increment the variable "q" for each iteration of this script would be greatly appreciated.

    if (q === 1) {
        selectedDiv = '#selectId1';
        selectedDiv2 = '#selectId2';
    }
    if (q === 2) {
        selectedDiv = '#selectedId2';
        selectedDiv2 = '#selectedId3';
    }
    if (q === 3) {
        selectedDiv = '#selectedId3';
        selectedDiv2 = '#selectedId4';
    }
    if (q === 4) {
        selectedDiv = '#selectedId4';
        selectedDiv2 = '#selectedId5';
    }
    if (q === 5) {
        selectedDiv = '#selectedId5';
        selectedDiv2 = '#selectedId6';
    }

    $(selectedDiv).change(function () {

        if (q == 1) {
            var pullDownDivs = '#2';
        }
        if (q == 2) {
            var pullDownDivs = '#3';
        }
        if (q == 3) {
            var pullDownDivs = '#4';
        }

        if (dropDownSelectJoined != null) {
            var dropDownSelectJoined = dropDownSelectJoined + ", " + $(selectedDiv).val();
        }
        else {
            var dropDownSelectJoined = $(selectedDiv).val();
        }


        var SelArea = $(selectedDiv).val();
        if (SelArea != 0) {
            var url = '@Url.Action("NetworkSubForm")';
            q++;
            $.post(url, { RemovedAreaId: $('#RemovedAreaId').val(), selectedNetworkId: $('#SelectedNetworkId').val(), dropDownSelectJoined: dropDownSelectJoined },
            function (data) {
                var productDropdown = $(selectedDiv2);
                productDropdown.empty();
                productDropdown.append("<option>-- Select Area --</option>");
                for (var i = 0; i < data.length; i++) {
                    productDropdown.append($('<option></option>').val(data[i].Value).html(data[i].Text));
                }
            });
            $(pullDownDivs).show();
            $(pullDownDivs).html();
        }
        else {
            $(pullDownDivs).hide();
            $(pullDownDivs).html();
        }
    });

Answer 1

I don't know what the rest of your code looks like, but you can see this kind of behavior due to "shadowing":

var q = 0; //global "q"
function handler() {
    var q = 0; //local "q" that shadows the global "q";

    ...
    ...

    q++;
    console.log(q);
}

Repeatedly calling handler will output 1 each time since you are redefining a local q within handler. However, the outer q remains unchanged. But if you did this:

var q = 0; //global "q"
function handler() {
    var q = 0; //local "q" that shadows the global "q";

    ...
    ...

    window.q++;
    console.log(window.q);
}

The global q will be updated since you are explicitly referencing it by doing window.q.