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.

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.

• javascript
• jquery

3 Answers 3

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.

$('.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;  
});

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.