Reputation: 7688
Which is the right way of declaring a global javascript variable? The way I'm trying it, doesn't work
$(document).ready(function() {
var intro;
if ($('.intro_check').is(':checked')) {
intro = true;
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function(){
if(this.checked) {
intro = false;
$('.enabled').removeClass('enabled').addClass('disabled');
} else {
intro = true;
if($('.intro').exists()) {
$('.disabled').removeClass('disabled').addClass('enabled');
} else {
$('.intro').wrap('<div class="disabled"></div>');
}
}
});
});
console.log(intro);
Upvotes: 42
Views: 113604
Reputation: 866
You can define the variable inside the document ready function without var to make it a global variable. In javascript any variable declared without var automatically becomes a global variable
$(document).ready(function() {
intro = "something";
});
although you cant use the variable immediately, but it would be accessible to other functions
Upvotes: 3
Reputation: 87083
declare this
var intro;
outside of $(document).ready()
because, $(document).ready()
will hide your variable from global scope.
Code
var intro;
$(document).ready(function() {
if ($('.intro_check').is(':checked')) {
intro = true;
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function(){
if(this.checked) {
intro = false;
$('.enabled').removeClass('enabled').addClass('disabled');
} else {
intro = true;
if($('.intro').exists()) {
$('.disabled').removeClass('disabled').addClass('enabled');
} else {
$('.intro').wrap('<div class="disabled"></div>');
}
}
});
});
Another way:
window.intro = undefined;
$(document).ready(function() {
if ($('.intro_check').is(':checked')) {
window.intro = true;
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function(){
if(this.checked) {
window.intro = false;
$('.enabled').removeClass('enabled').addClass('disabled');
} else {
window.intro = true;
if($('.intro').exists()) {
$('.disabled').removeClass('disabled').addClass('enabled');
} else {
$('.intro').wrap('<div class="disabled"></div>');
}
}
});
});
console.log(intro);
outside of DOM ready function (currently you've) will log undefined
, but within DOM ready it will give you true/ false.
console.log
execute before DOM ready execute, because DOM ready execute after all resource appeared to DOM i.e after DOM is prepared, so I think you'll always get absurd result.I need to use it outside of DOM ready function
You can use following approach:
var intro = undefined;
$(document).ready(function() {
if ($('.intro_check').is(':checked')) {
intro = true;
introCheck();
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function() {
if (this.checked) {
intro = true;
} else {
intro = false;
}
introCheck();
});
});
function introCheck() {
console.log(intro);
}
After change the value of intro
I called a function that will fire with new value of intro
.
Upvotes: 37
Reputation: 382919
JavaScript has Function-Level variable scope which means you will have to declare your variable outside $(document).ready()
function.
Or alternatively to make your variable to have global scope, simply dont use var
keyword before it like shown below. However generally this is considered bad practice because it pollutes the global scope but it is up to you to decide.
$(document).ready(function() {
intro = null; // it is in global scope now
To learn more about it, check out:
Upvotes: 14
Reputation: 8711
Unlike another programming languages, any variable declared outside any function automatically becomes global,
<script>
//declare global variable
var __foo = '123';
function __test(){
//__foo is global and visible here
alert(__foo);
}
//so, it will alert '123'
__test();
</script>
You problem is that you declare variable inside ready()
function, which means that it becomes visible (in scope) ONLY inside ready()
function, but not outside,
Solution:
So just make it global, i.e declare this one outside $(document).ready(function(){});
Upvotes: 2
Reputation: 102793
If you're declaring a global variable, you might want to use a namespace of some kind. Just declare the namespace outside, then you can throw whatever you want into it. Like this...
var MyProject = {};
$(document).ready(function() {
MyProject.intro = "";
MyProject.intro = "something";
});
console.log(MyProject.intro); // "something"
Upvotes: 92
Reputation: 140244
Use window.intro = "value";
inside the ready function. "value"
could be void 0
if you want it to be undefined
Upvotes: 1
Reputation: 34117
like this: put intro
outside your document ready, Good discussion here: http://forum.jquery.com/topic/how-do-i-declare-a-global-variable-in-jquery @thecodeparadox is awesomely fast :P anyways!
var intro;
$(document).ready(function() {
if ($('.intro_check').is(':checked')) {
intro = true;
$('.intro').wrap('<div class="disabled"></div>');
};
$('.intro_check').change(function(){
if(this.checked) {
intro = false;
$('.enabled').removeClass('enabled').addClass('disabled');
} else {
intro = true;
if($('.intro').exists()) {
$('.disabled').removeClass('disabled').addClass('enabled');
} else {
$('.intro').wrap('<div class="disabled"></div>');
}
}
});
});
Upvotes: 2