Passing Global Variable to Function - Global Variable Not Updating After Function Run

Question

My code increments a number up or down by 1. The problem is "testNum" which is a global variable should reflect the increments up or down but when I check the value of "testNum" in the console it's always 20. I pass "testNum" to my function and return it. Why isn't it reflecting the increments?

Fiddle: http://jsfiddle.net/FnUXw/1/

<input type="button" id="btnDown" value="-">
<span id="amountDiv">amount div</span>
<input type="button" id="btnUp" value="+">

<script>
var testNum = 20;

amountDiv.innerHTML = testNum;

function makeButtonIncrement(button, upDown, displayDiv, variable) {

    function changeValue () {
        if (upDown == "up") {
            variable++;
        }

        if (upDown == "down") {
            variable--;
        }

        displayDiv.innerHTML = variable;
    }

    button.onclick = changeValue;

    return variable;
}

makeButtonIncrement(document.getElementById('btnDown'), "down", document.getElementById('amountDiv'), testNum);

makeButtonIncrement(document.getElementById('btnUp'), "up", document.getElementById('amountDiv'), testNum);
</script>

Answer 1

Numbers are passed by value, not be reference so you can do what you're trying to do. With your code structured the way it is, you would need to do it like this where you assign the return value:

testNum = makeButtonIncrement(document.getElementById('btnDown'), "down", document.getElementById('amountDiv'), testNum);

Only arrays and objects are passed by reference so they can be passed as arguments and have the function modify the original variable. Other types are passed by value (eg a copy is made for the argument) so you cannot modify the original.

The work-around to modify the original is to pass it as a property of an object. Then, because the object is passed by reference, the function can modify the original property value.

---

Or, since you're already using a global variable, you could just modify the global variable directly and not even pass it as an argument. It is the passing as an argument that makes a copy of it so you can't modify the original. Global variables are, in general, not recommended, but if it's already global for other reasons, you can just modify it directly in your function without passing it as an argument.

Answer 2

You are using "variable++" and "variable--" which is incrementing or decrementing that locally scoped variable (local to the function scope). The parameter is not a pointer to the global variable, it is passed by value (not by reference).

The simplest modification would be to change variable++ and variable-- to testNum++ and testNum-- respectively and remove that final function parameter as it is unnecessary.

Answer 3

function makeButtonIncrement(button, upDown, displayDiv) {

    function changeValue () {
        if (upDown == "up") {
            testNum++;
        }

        if (upDown == "down") {
            testNum--;
        }

        displayDiv.innerHTML = testNum;
    }

    button.onclick = changeValue;
}