How to pass function a_href = $(this).attr('href'); value to global a_href, make a_href="home"
var a_href;
$('sth a').on('click', function(e){
a_href = $(this).attr('href');
console.log(a_href);
//output is "home"
e.preventDefault();
}
console.log(a_href);
//Output is undefined
This question is related to
javascript
jquery
Your code looks fine except the possibility that if the variable declaration is inside a dom read handler then it will not be a global variable... it will be a closure variable
jQuery(function(){
//here it is a closure variable
var a_href;
$('sth a').on('click', function(e){
a_href = $(this).attr('href');
console.log(a_href);
//output is "home"
e.preventDefault();
}
})
To make the variable global, one solution is to declare the variable in global scope
var a_href;
jQuery(function(){
$('sth a').on('click', function(e){
a_href = $(this).attr('href');
console.log(a_href);
//output is "home"
e.preventDefault();
}
})
another is to set the variable as a property of the window object
window.a_href = $(this).attr('href')
Why console printing undefined
You are getting the output as undefined because even though the variable is declared, you have not initialized it with a value, the value of the variable is set only after the a element is clicked till that time the variable will have the value undefined. If you are not declaring the variable it will throw a ReferenceError
set the variable on window:
window.a_href = a_href;
You can avoid declaration of global variables by adding them directly to the global object:
(function(global) {
...
global.varName = someValue;
...
}(this));
A disadvantage of this method is that global.varName won't exist until that specific line of code is executed, but that can be easily worked around.
You might also consider an application architecture where such globals are held in a closure common to all functions that need them, or as properties of a suitably accessible data storage object.
Source: Stackoverflow.com