jQuery - global variable

Question

I am trying to use variable in different function, I want to set global variable. Is there way how to do it?

I want something like this:

$('.bar1').animate({'height':'10' + "%"},1500, function() {  
    var bar1_height = $(".bar1").height() * 0.5;  
});

and then use variable bar1_height elsewhere.

score 6 · Accepted Answer · answered Jun 27 '12 at 18:34

6

Declare bar_height outside of your function.

var bar1_height;
$('.bar1').animate({'height':'10' + "%"},1500, function() {
    bar1_height = $(".bar1").height() * 0.5;
});

This will allow you to access it globally (i.e. both inside and outside of your function).

From MDN:

When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.

answered Jun 27 '12 at 18:34

j08691

204,283
31
260
272

I have tried it to retrieve value `$('.test').text(bar12_height);` and it gave me "undefined%" – Mario LIPCIK Jun 27 '12 at 18:46
Without seeing the rest of the relevant code I can't help. Also, do you mean bar1_height or bar12_height? – j08691 Jun 27 '12 at 18:47
this is a rest of the code, and I can not figure out what I am doing wrong http://jsfiddle.net/lipcikm/zXJry/2/ – Mario LIPCIK Jun 27 '12 at 19:11
Two things. 1) you should remove the var from `var bar1_height` within your animate call as that would essentially re-declare it. 2) Your code for assigning the value is right, but it's being executed before the animation is done. Move it inside like this: http://jsfiddle.net/j08691/zXJry/3/ – j08691 Jun 27 '12 at 19:18
Ok, but I want to use that variable bar1_height out side of the function ... I would like to use that value late in code, do you understand what I mean? – Mario LIPCIK Jun 27 '12 at 19:24
You can. By declaring it outside the function you have access to it throughout your code. However in order for it to have a value, in your case you need to wait until the animation is done. – j08691 Jun 27 '12 at 19:30
Can you show me example on my jsfindle? I have been trying to do it but without luck – Mario LIPCIK Jun 27 '12 at 19:39

score 1 · Answer 2 · answered Jun 27 '12 at 18:35

1

$('.bar1').animate({'height':'10' + "%"},1500, function() {  
    window.bar1_height = $(".bar1").height() * 0.5;  
});

Done.

Or a more ideal way to do

var bar1_height;
$('.bar1').animate({'height':'10' + "%"},1500, function() {  
    bar1_height = $(".bar1").height() * 0.5;  
});

answered Jun 27 '12 at 18:35

Derek 朕會功夫

92,235
44
185
247

1

While this is indeed a *global* variable (well, property really), it is also generally *not* an ideal way to solve this problem... – Jun 27 '12 at 18:36
@pst - I know, but the OP says he wants a *global* variable, and this sure is global. – Derek 朕會功夫 Jun 27 '12 at 18:37
The OP is also less experienced with JavaScript. Provide additional information useful to make informed decisions :) – Jun 27 '12 at 18:38
Upvoted, although explaining the differences would make this a better answer. Also, see RichardTowers answer. – Jun 27 '12 at 18:50

score 1 · Answer 3 · edited May 23 '17 at 12:27

One of the worst aspects of javascript is implied global scope. You could make your variable global just by dropping the var keyword:

$('.bar1').animate({'height':'10' + "%"},1500, function() {  
   bar1_height = $(".bar1").height() * 0.5;  
});

But this is considered very bad practice. For example:

var getAddress = function(street, city, country) {
    location = street + ', ' + city + ', ' + country;
    return location;
}
getAddress('Holborn', 'London', 'England');

Can you spot the horrendous bug? jsFiddle.

You should really declare your variable in the narrowest scope possible, otherwise you'll end up with a confusing mess of global variables. If you need a variable both inside and outside a function, you should simply declare it in the outer scope (as the other answers have said):

(function () {
    var bar1_height;

    $('.bar1').animate({'height':'10' + "%"},1500, function() {
        // Use variable from outer scope  
        bar1_height = $(".bar1").height() * 0.5; 
    }); 

    // Variable still has its value here
    alert(bar1_height);
})();

(The mysterious outer function here is to prevent the variable from being truly global.)

I found this blog post very useful in understanding best practices regarding variable scope.

jQuery - global variable

3 Answers3