Passing variable with JavaScript function - javascript

I am trying to pass variable though the GetDetail function below. I can pass string/number and it works properly.
But I'm unable to pass variable
detLink.onclick = new Function ("GetDetails()");
detLink.setAttribute('onclick',"javascript:GetDetails()")

detLink.onclick = function () { GetDetails ( parameter1, parameter2, ... ); }
which is an anonymous function.
Read also The function expression (function operator)
A function expression is similar to and has the same syntax as a function declaration
function [name]([param] [, param] [..., param]) {
statements
}
name
The function name. Can be omitted, in which case the function becomes
known as an anonymous function.
param
The name of an argument to be passed to the function. A function can
have up to 255 arguments.
statements
The statements which comprise the body of the function.

detLink.setAttribute('onclick',"javascript:GetDetails("+yourVariableName+")")
When You set attribute You are using string datatype, thus you have to stitch function name with variable VALUE

If you have access to the variable in question when you set the click handler,
detLink.onclick = function() {
GetDetails(foo);
}
If you don't,
detLink.id = uniqueId;
detLink.onclick = function() {
var foo = globalData[this.id];
GetDetails(foo);
}
// somewhere else in your code, where you know the value of the variable
globalData[detLink.id] = foo;

var val1 = "Hell world"
detLink.onclick = GetDetails( val1 );
function GetDetails( myVar ){
alert ( myVar );
}

Related

function inside function with same name in javascript

If I pass function to a function with same function name and handler name, which one will get precedence ? and how to access each of those two inside function in case in need to do recursion as well as refer to the passed function. See below code.
var f1,f2;
(function f(f){
return typeof f(f2); /*please check below comments for output of this line*/
})(function(f1){ return 1; });
/* this will call the passed function,why not recursion will not happen here? */
The function parameter gets precedence over the function's own name. If you shadow or overwrite a variable, you can't access it (unless it's a shadowed global).
Solution is to use different names.
The recursion doesn't happen simply because the argument of the function get precendence than the function itself. here is an example that shows it:
(function f (f) {
return f.name;
}) (function funcName () { }); // this will return funcName
if we change the name of the argument to f1, f will become the reference of the function itself
(function f (f1) {
return f.name;
}) (function funcName () { }); // this will return f
I see that you use jquery. So I want to ask where do you have declared your functions? inside
<script type="text/javascript">
$(document).ready(function(){
function f(){
return 'this is local function inside anonymous function, so it's invisible for recursion in aside of current document ready'
}
});
//or here?
function f(){
return 'this function is a window object property, and must be visible for recursion';
}
</script>

Use of () in javascript for a function

Sorry if its being a noob question, but I still can't understand the difference of its usage so I am unable to search on google with right keywords to search for.
I am following this tutorial on Closures.
Now my query is for this code -
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
Why displayName being a function is referenced as a property in the code ? Do being a closure function it needs to be returned as a property as I tried this code -
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName();
}
var myFunc = makeFunc();
myFunc();
Output - An alert but an error TypeError: myFunc is not a function.
Let me know when to use what or what basic concept I am missing here.
"return displayName;" is returning the function displayName.
The result is then being set to myFunc.
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
It is easier to understand if you think of:
function displayName(){}
as an alternative to:
displayName = function(){}
makeFunc = function () {
var name = "Mozilla";
displayName = function () {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
In first case, you're returning a function reference which you can use later. In the second case, you are returning the result of the function which is undefined since you're not returning anything. So the error comes up as myFunc is not a reference to a function and hence cannot be called.
Other than the above, I don't know what you're meaning to say when you say "property".
return displayName()
this code returning not the function, but result of calling this function.
var myFunc = makeFunc();
myFunc();
the same.in myFunc not the function, but it's result.
try to do this:
return displayName;
...
var myFunc = makeFunc(); //makeFunc() will return displayName() function
myFunc();
Before understanding closures, which is a concept extended from the Javascript function scope.
Closures: allows certain variables to get accessed within the scope being created.The inner function can get accessed to the outer function as well as its variables.But the outer function cannot access variables within the inner function.
So in your closure example, the reason why output alerts "Mozilla" is because your inner function-displayName alerts the name variable declared in the outer function (displayName can get access to any variables in the makeFunc function). So when your makeFunc function invokes the inner function-displayName, you will get a TypeError with undefined. Same result will output when you simply call the makeFunc(), you get undefined.

Javascript calling function inside function

I am trying to get the function in a function with argument inside the child function
function firstF (){
this.childF1 = function($argument){
// do something + $argument
}
this.childF2 = function($argument2){
// do something + $argument2
}
}
//Declare a new firstF
var firstFunction = new firstF();
firstFunction.childF1
how do i declare the $argument here?
You do it like this:
var firstFunction = new firstF();
firstFunction.childF1(arghere)
childF1 is a property of your firstF object and that property is a function. So, you call it like a function with parens and you pass the arguments in the parens. You must call it on an already created object of type firstF, not on the firstF function itself.

passing an anonymous function to another function in Javascript

I understand you can pass a function as an argument to another function like so
var fn = function(){alert('Hello')}
function outer(a,fn){
fn();
}
How can you pass an anonymous function to another function and have it invoked within the function after taking a parameter from the outer function?
function outer(function(x){alert(x);})
{
var xVar = "foo";
//..would liked to pass xVar to the anaonymous function
//passed as a param to the function so that "foo" is displayed as message...
}
Please note changing the signature of outer would be the last choice.
You're confusing function invocation (calling a function) with function declaration (defining a function). Here's how do what you ask:
// declare the outer function
function outer(func)
{
var xVar = 'foo';
func(xVar)
}
// now invoke it
outer(function (x)
{
alert(x);
});

Very basic Javascript constructors problem

In the following JavaScript code main() is called.
My question is why the second constructor is called rather than the first one ?
What am I missing here ?
Thanks !!
function AllInputs() {
alert("cons 1");
this.radioInputs = [];
alert(this);
}
function AllInputs(radioElement) {
alert("cons 2");
this.radioInputs = [radioElement];
alert(this);
}
AllInputs.prototype.toString = function() {
return "[object AllInputs: radioInputs: " + this.radioInputs.length + "]";
}
function main() {
var result = new AllInputs();
}
Javascript does not support overloaded functions.
When you define the same function twice, the second definition replaces the first one.
Instead, you should make a single function, and check arguments.length to see how many arguments were passed.
For example:
function AllInputs(radioElement) {
this.radioInputs = arguments.length ? [radioElement] : [];
alert(this);
}
In JavaScript, the last definition of an identifier is used:
function foo() { return "bar"; }
var foo = "foo";
alert(foo);
In that case, foo was a variable with the value "foo". Had foo been a function, it would have simply said that foo was a function. If you don't believe it, try using alert(foo()) instead of just alert(foo). You'll most likely get an error in your console log with no visible output like you had with alert(foo) (the variable...not the function call).
function foo() { ... }
is really just shorthand for
var foo = function () { ... }
Hence, the second time you're declaring the function, you're overwriting the variable AllInputs with a different function. There ain't no such thing as two functions with the same name in Javascript, since all functions are really variables.

Categories