how to return anonymous function in javascript - javascript

<html>
<head>
<script>
function test(){
return function(){
alert("hi");
}
}
test();
</script>
</head>
<body>
</body>
</html>
This is my code, can I ask why it doesnt work properly??

Because you're returning your function but not invoking it.
Try this:
test()();
Here is a fiddle

I think you might be confused. test() returns a function reference, but it won't execute it.
You could do something like this
var alertFunc = test(); // return function reference
alertFunc(); // call the function

Related

I want to call a function on onclick but that function should be inside another function

Javascript code:
function abc() {
function def() {
//do something
}
}
HTML code:
<button onclick="def()">click me</button>
I get the error def() is not defined.
Try this.
function def(){
//do something
}
function abc(playDef){
if(playDef){
def()
}
}
<button onclick="def(true)">click me</button>
For more functions you can pass arguments and manage if condition
You only need to declare def in global scope:
function abc(){
window.def = function(){
console.log("hello, I'm function def");
}
}
abc();
def();
But remember you need to call abc first to get access to def function.
Hope this helps. Good luck.
I have completed my answer with a code snippet, you can try the working solution:
function abc(){
window.def = function(){
console.log("hello, I'm function def");
}
}
abc();
<button onclick='def();'>Click Me!</button>

Why the code innerHTML on javascript is not working?

there are HTML code and JavaScript code
<script>
function Stock_Listing() {
document.getElementById("stock_menu").innerHTML = "hi";
}
</script>
<ul id="stock_menu" onload="Stock_Listing()"></ul>
but there is nothing on my page.
could you plz tell me why is not working?
and also not working insertAdjacentHTML.
<script>
function Stock_Listing() {
document.getElementById("stock_menu").insertAdjacentHTML = ("afterbegin", "hi");
}
</script>
<ul id="stock_menu" onload="Stock_Listing()"></ul>
In your onLoad function, you are declaring a function but never calling it. You don't need that second function:
window.onload = function() {
document.getElementById("stock_menu").innerHTML = "hi";
}
<ul id="stock_menu"></ul>
Or at least, you need to call that second function:
window.onload = function() {
function Stock_Listing() {
document.getElementById("stock_menu").innerHTML = "hi";
}
Stock_Listing();
}
<ul id="stock_menu"></ul>
Both method works, I would prefer the first one since you don't really need the Stock_Listing function.
You're not calling the second function, Stock_Listing(), anywhere. You need to call it or take the get element.... line outside of it

Why setTimeout put outside a function will not be triggered?

see these 2 example
<head>
<script language="JavaScript" type="text/javascript">
var mTimer=setTimeout(foo();1000);
</script>
</head>
Other example
<head>
<script language="JavaScript" type="text/javascript">
var mTimer;
function test(){ mTimer=setTimeout(foo();1000);}
</script>
</head>
In example 1, when we load the page the mTimer=setTimeout(foo();1000); won't run
In example 2, when we click button to trigger test(); then this time mTimer=setTimeout(foo();1000); starts to run.
Why setTimeout put outside a function will not be triggered when loading the page?
setTimeout definitely works outside of a function.
Unless foo is a function that returns another function, more than likely you want
// do this
var mTimer = setTimeout(foo, 1000);
Instead of
// don't do this
var mTimer = setTimeout(foo(), 1000);
The difference is in the first code, a reference to function foo is passed to setTimeout where as in the second code, the return value of foo() is passed to setTimeout
Run this code snippet to see it work
function foo() {
alert("it works!");
}
setTimeout(foo, 1000);

Adding multiple functions on <body onload>

I am trying to add multiple onload functions into my <body>
My current code:
<body onload="_googWcmGet(number, '1800 000 000'); initialize()">
The _googWcmGet is working but the second function isn't working... Please help!
document.body.addEventListener( 'load', function1, false );
document.body.addEventListener( 'load', function2, false );
// etc.
Or, if you're using jQuery, just use as many of these as you need:
$(function(){ … });
$(function(){ … });
$(function(){ … });
There is no different how many statements you wrote in onload event:
function f() {
console.log('f');
}
function g() {
console.log('g');
}
<body onload="f(); g()"></body>
I believe you have an error in your first function:
function f() {
console.log(undefinedVariable);
}
function g() {
console.log('g');
}
<body onload="f(); g()"></body>
As you see, the g() won't execute as there is an error in the first function.
I modified the code provided above with a JQuery instead of a $. This code is now working well.
Correct Code - Functioning Well:
jQuery(document).ready(function() {
_googWcmGet('number', '1800 198 885');
initialize();
});
It seems that console.log is the problem. Take a look at this link
https://developer.mozilla.org/en-US/docs/Web/API/Console.log
Calling multiple functions onload is possible like you did, see article. Here are other ways:
I
function init() {
_googWcmGet(number, '1800 000 000');
initialize();
}
<body onload="init()">
//or
window.onload = init;
II
$(document).ready(function() {
//or
//$(function() {
_googWcmGet(number, '1800 000 000');
initialize();
});

SetTimeout don't work correctly

I think the pop window with OK string will be dislayed afetr 5s after I click the button, but the pop window dispalyed immediately after I click the button, why?
Thanks!
<html>
<head>
<title>Wake up call</title>
<script type="text/javascript">
function wakeUpCall() { // Function is defined here
setTimeout(aa("ok"), 5000);
}
function aa(bb) {
alert(bb);
}
</script>
</head>
<body bgcolor="lightblue">
<form>
<input type="button"
value="Wake me"
onclick="wakeUpCall()">
</form>
</body>
</html>
function wakeUpCall() { // Function is defined here
setTimeout(function(){ alert("ok");}, 5000);
}
You are trying to do it the wrong way.
You have to use a callback for the setTimeout:
setTimeout(function()
{
// actual code here
}, 5000);
Mike has provided in his answer - that you could use an evaluatable string:
setTimeout('/* actual code here */', 5000);
But that is strongly discouraged, use his other example - passing the callback function as a reference and invoking callback arguments.
You have to take in mind, though, that if you are going with callback arguments, see this section of MDN article. The callback arguments aren't supported in all browsers.
Personally, I'd suggest going with plain old callbacks, because that's how the setTimeout is meant to be used.
Just for your information:
The reason why your snippet isn't working for you, is, because:
setTimeout(aa('ok'), 5000);
// aa('ok') here is executed, and returns its value, so, in the end, you pass the returned value of aa inside the Timeout.
// and, nor alert alert, nor your function have a "return" statement, so they both will return always undefined.
// that translates to:
setTimeout(undefined, 5000); // and, that does nothing
What if you would do it like this:
<html>
<head>
<title>Wake up call</title>
<script type="text/javascript">
function wakeUpCall() { // Function is defined here
setTimeout('aa("ok");', 5000);
}
function aa(bb) {
alert(bb);
}
</script>
</head>
<body bgcolor="lightblue">
<form>
<input type="button"
value="Wake me"
onclick="wakeUpCall()">
</form>
</body>
</html>
Notice I have quoted the statement to execute in the setTimeout function. It those quotes confuse you, I think this is a good resource to take a look at: https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
Another way to do it, I just learned from the resource above, is like this:
function wakeUpCall() { // Function is defined here
setTimeout(aa, 5000, "Your tekst here");
}
Use anonymous functions for this.
<html>
<head>
<title>Wake up call</title>
<script type="text/javascript">
function wakeUpCall() { // Function is defined here
setTimeout(function(){aa("ok");}, 5000);
}
function aa(bb) {
alert(bb);
}
</script>
</head>
<body bgcolor="lightblue">
<form>
<input type="button"
value="Wake me"
onclick="wakeUpCall()">
</form>
</body>
</html>

Categories