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.
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.
$('.test').text(bar12_height); and it gave me "undefined%"
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: jsfiddle.net/j08691/zXJry/3$('.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.
