Before I specify what I am struggling with, let me show you my JavaScript codes.

var gVar = 0;

$("#plus").click(function(e) {
    e.preventDefault();
    gVar = gVar + 1;
    alert(gVar);
});

$("#minus").click(function(e) {
    e.preventDefault();
    gVar = gVar + 1;
    alert(gVar);
});

In the code above, I first set a global variable 'gVar' that holds a integer value of zero. Whenever I click a button whose ID is "plus", the value of the global variable 'gVar' is going to increment by 1, which will be printed out in a browser's dialogue box.

The same thing will happen for the button whose ID is "minus" except that the value of 'gVar' is going to decrement by 1.

In my attempt to tidy up the code above, I created a function separately, which will be called whenever I click the two buttons. Here are the code.

var gVar = 0;

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        Var = Var + num1;
        alert(Var);
    });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

When I run this code, the value of 'gVar' never changes and always stays '0'.

I think I vaguely know what the issue here is, but not entirely sure what is causing this problem. Any input will greatly be appreciated to clarify this issue for me.

Also, I am curious as to if there is any way to create a function to achieve the same effect instead of writing a similar set of code twice for the two different click events.

Before I specify what I am struggling with, let me show you my JavaScript codes.

var gVar = 0;

$("#plus").click(function(e) {
    e.preventDefault();
    gVar = gVar + 1;
    alert(gVar);
});

$("#minus").click(function(e) {
    e.preventDefault();
    gVar = gVar + 1;
    alert(gVar);
});

In the code above, I first set a global variable 'gVar' that holds a integer value of zero. Whenever I click a button whose ID is "plus", the value of the global variable 'gVar' is going to increment by 1, which will be printed out in a browser's dialogue box.

The same thing will happen for the button whose ID is "minus" except that the value of 'gVar' is going to decrement by 1.

In my attempt to tidy up the code above, I created a function separately, which will be called whenever I click the two buttons. Here are the code.

var gVar = 0;

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        Var = Var + num1;
        alert(Var);
    });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

When I run this code, the value of 'gVar' never changes and always stays '0'.

I think I vaguely know what the issue here is, but not entirely sure what is causing this problem. Any input will greatly be appreciated to clarify this issue for me.

Also, I am curious as to if there is any way to create a function to achieve the same effect instead of writing a similar set of code twice for the two different click events.

• javascript
• jquery
• variables

• 3 It's an int; the parameter won't be the global value. You could create a global object with a counter in it. – Dave Newton Commented Jan 19, 2016 at 18:08
• 4 I think that simple type parameters (int in your case) are not passed by reference to the function, that's why you need to pass an object type parameter to the function, as @DaveNewton wrote – Alon Eitan Commented Jan 19, 2016 at 18:13

3 Answers 3

In JavaScript, only objects are passed as a reference, all other types, including numbers, are copied when you assign them to another variable.

You can instead pass your variable name as a string and then refer to it as window[Var]:

var gVar = 0;

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        window[Var] = window[Var] + num1;
        alert(window[Var]);
    });
};

weird("#plus", "gVar", 1);
weird("#minus", "gVar", -1);

As @shiplu.mokadd.im suggested, you can also change gVar to object:

var gVar = {value: 0};

var weird = function (button, Var, num1) {
    $(button).click(function(e){
        e.preventDefault();
        Var.value = Var.value + num1;
        alert(Var.value);
    });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

No matter what the function is, you cannot reassign an argument and expect the scope to reflect that change. Depending on the argument however, you can modify it (i.e. if gVar were an object or an array). I suggest you read about pass by reference/value to gain a better understanding of what this means here

the essence of a global variable is that it is global to the whole program, and as such - doesn't need to be passed as argument to any function.

so without modifying too much of your original code

var gVar = 0;

var weird = function (button, num1) {
    $(button).click(function(e){
        e.preventDefault();
        gVar += num1;
        alert(Var);
    });
};

weird("#plus", 1);
weird("#minus", -1);

var gVar = {
  value: 0
};

var weird = function(button, Var, num1) {
  $(button).click(function(e) {
    e.preventDefault();
    Var.value = Var.value + num1;
    alert(Var.value);
  });
};

weird("#plus", gVar, 1);
weird("#minus", gVar, -1);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="+" id="plus">
<br>
<input type="button" value="-" id="minus">