CODEWITHSUNDEEP
javascriptjqueryvariables
oosniss
oosniss

Reputation: 460

JavaScript, accessing a global variable through a function

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.

Upvotes: 2

Views: 3834

Answers (3)

Mohammed Raja
Mohammed Raja

Reputation: 207

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="+" id="plus">
<br>
<input type="button" value="-" id="minus">

Upvotes: 0

Michał Perłakowski
Michał Perłakowski

Reputation: 92481

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);

Upvotes: 4

Antiokus
Antiokus

Reputation: 544

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);

Upvotes: 1

Related Questions