I am calling a function on button click like this:
<input type="button" onclick="outer();" value="ACTION">
function outer() {
alert("hi");
}
It works fine and I get an alert:
Now when I do like this:
function outer() {
function inner() {
alert("hi");
}
}
Why don't I get an alert?
Though inner function has a scope available in outer function.
You could make it into a module and expose your inner function by returning it in an Object.
function outer() {
function inner() {
console.log("hi");
}
return {
inner: inner
};
}
var foo = outer();
foo.inner();
The scoping is correct as you've noted. However, you are not calling the inner
function anywhere.
You can do either:
function outer() {
// when you define it this way, the inner function will be accessible only from
// inside the outer function
function inner() {
alert("hi");
}
inner(); // call it
}
Or
function outer() {
this.inner = function() {
alert("hi");
}
}
<input type="button" onclick="(new outer()).inner();" value="ACTION">
You are not calling the function inner
, just defining it.
function outer() {
function inner() {
alert("hi");
}
inner(); //Call the inner function
}
You can also try this.Here you are returning the function "inside" and invoking with the second set of parenthesis.
function outer() {
return (function inside(){
console.log("Inside inside function");
});
}
outer()();
Or
function outer2() {
let inside = function inside(){
console.log("Inside inside");
};
return inside;
}
outer2()();
Again, not a direct answer to the question, but was led here by a web search. Ended up exposing the inner function without using return, etc. by simply assigning it to a global variable.
var fname;
function outer() {
function inner() {
console.log("hi");
}
fname = inner;
}
Now just
fname();
If you want to call the "inner" function with the "outer" function, you can do this:
function outer() {
function inner() {
alert("hi");
}
return { inner };
}
And on "onclick" event you call the function like this:
<input type="button" onclick="outer().inner();" value="ACTION">
you can also just use return:
function outer() {
function inner() {
alert("hi");
}
return inner();
}
outer();
function outer() {
function inner() {
alert("hi");
}
inner();
}
you should try this
In JavaScript
If using ES6
static
functions can be used in a class
If using ES5
After several days of usage, below is what I came up with,
it is minimal & also has a lot of conveniences:
function MathFunctions() {
let thefo = {}; // the functions object
thefo.sum = sum = (a, b) => {
return a + b;
};
thefo.avg = avg = (a, b) => { // name is repeated 2 times - minor inconvenience
return sum(a, b) / 2; // calls sum, another function without using 'this'
};
return thefo; // no need to go down & export here always for each new function - major convenience
}
// Usage
console.log(MathFunctions().sum(1, 2));
console.log(MathFunctions().avg(1, 2));
// OR
const mf = MathFunctions();
console.log(mf.sum(1, 2));
console.log(mf.avg(1, 2));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.