What is wrong with this javascript code - javascript

In the code below, I have tried to display alert when the user clicks on the document.As I have done doAlert() with parenthesis, the code runs when the document load and alerts without any events occur but if I do simply
doAlert
It seems to respond when I click the document. So, is it must that I should call function in javascript without the parenthesis or what is the idea for doing this. What if I were to pass parameter to a function.
<!doctype html>
<html>
<head>
<script>
function doAlert(){
alert("Hello");
}
function init(){
document.onclick = doAlert();
}
window.onload = init();
</script>
</head>
<body>
</body>
</html>

If foo is a function, then bar = foo will assign that function to the variable bar, but bar = foo() will immediately call the function and assign its return value to bar instead.
Event handlers work by being given a function that will be called when the event happens. If you run the function immediately then its return value needs to be a function that you want to run when the event happens (in this case the return value of both doAlert and init is undefined).

document.onclick is being set to the return of doAlert and not the doAlert function itself.
Your code should look like:
<!doctype html>
<html>
<head>
<script>
function doAlert(){
alert("Hello");
}
function init(){
document.onclick = doAlert;
}
window.onload = init;
</script>
</head>
<body>
</body>
</html>

When you call a function, you get its return value.
window.onload = init();
This runs init() and sets window.onload to its return value, undefined.
You need to set it like this:
window.onload = init;
Now window.onload is set to the function init, it won't run until it needs to.
If you want to pass parameters, like in your onClick, you can do it like this:
document.onclick = function(){
doAlert('Clicked');
};
This sets onClick to an anonymous function, that calls the functions you want. Or, you can use a closure:
function doAlert(param){
return function(){
alert(param);
};
};
document.onClick = doAlert('Hello World');
doAlert is called, onClick is set to its return value, which is a function (in this case one that alerts 'Hello World').

Functions in Javascript are objects and can be passed along like any other variable. In your case, doAlert is just a reference to a function. In order to call the function pointed by this reference, you need to use parenthesis : doAlert().
The document.onclick method is supposed to be a function reference, so you assign it a function reference like this : document.onclick = doAlert. With your syntax, you assign the result of a call to doAlert() to document.onclick, which is incorrect.
Got it ? :)

Related

Button doesn't work after I put them into named functions

I write some JavaScript code, when I write them in anonymous functions like
<br />"button.onclick = function() { some code; };,
It works normally. But when I try to write as
<br />
foe.onclick = myFunction();
function myFunction() { same code here; }
Then nothing happens when I click the button. I try to add alert in myFunction() and it appears immediately after the page is load. Why this happened?
You need to change from
foe.onclick = myFunction();
to
foe.onclick = myFunction;
When you use the function call with parentheses, you are calling the function. So, when you use:
foe.onclick = myFunction();
It actually executes the function at this point and returns the value for onclick to use.
You can also use:
function myFunction () {
return anotherFunction();
}
foe.onclick = myFunction();
Here, anotherFunction would be called when you click foe element.
As Xin points out, you can use:
foe.onclick = myFunction;
to call myFunction on clicking the element. In Javascript, functions can be referenced and passed like variables :D

How to retrieve the function called in an onload?

Is there a way for me to retrieve and change the value of an onload function?
i.e
i want to get the value of the onload on this tag:
<body onLoad="test();">
is there a way for me to do this?
since i need to change the function being called on certain circumstances.
Yes, you can get it from window.onload.
var func = window.onload;
Given your example, you'll get a function that looks something like this:
var func = function(event) {
test();
};
So then you can call your function whenever you need, though you won't have an event object to pass it.
func();
To change it, just do it sometime before the onload event happens:
<body onload="test();">
<script>
var func = window.onload;
alert(func); // alerts the function
if (condition_is_met) {
window.onload = function() {
/* my new func */
};
}
</script>
</body>
This will overwrite the original function with a new one. As long as you do it before the event occurs, your new function will be invoked.

Passing a function pointer to an event in JavaScript

I understand when passing a function pointer to an event handler you cannot invoke the function block with parentheses or the return value of that function will be assigned to the event handler. I tried this and I'm confused on how it works?
window.onload = alert("Hello, World.");
I can see how this works:
window.onload = function () { alert("Hello, World!"); };
The literal function is not self-invoked leading to no return value and is only invoked once the onclick-event is invoked.
Edit 1: I don't want to achieve anything with this. I just want to understand how window.onload = alert("Hello, World."); works perfectly and how window.onload = show_message("Hello, World."); doesn't work?... Considering that show_message is actually a function.
Edit 2: Some user is claiming the onload event handler to work with parentheses on any function. I do not think this works like it should because the function is invoked ignoring the event handler and the return value of that function is assigned to the event handler. Most functions do not return anything so (undefined or null) will be assigned to the event handler.
Look at the code below:
var button = document.getElementById("button");
function test() {
str = "works";
console.log(str);
}
button.onclick = test;​
Assume there is a button element with the id of button assigned to it. This will only work if test is not invoked with parentheses (button.onclick = test();). Test will only run once and undefined will be assigned to onclick.
Edit 3: It looks like a return value is not assigned to an event handler if the function is invoked. It always writes out null to the console when I use console.log.
Nice question. Actually it does not work as you expect it to work. It's just illusion that it works that way. When you run:
window.onload = alert("Hello, World.");
The right part of the statement is executed and alert is shown, but the window on load handler is not set up to some function, null will be assigned to it, since this is what alert returns.
By the way even if you call the method with parentheses you can return function from it to assign to the event handler:
var button = document.getElementById("button");
function test() {
str = "works";
console.log(str);
return function(){console.log('button clicked');}
}
button.onclick = test();
window.onload = alert("Hello, World.");, you saw the alert works just because it alert when it execute, and assign the result (undefined) to window.onload.

Capturing events in javascript

<!doctype html>
<html>
<body>
<div id = 'div' style = 'width:100px;height:100px;background:#000000;'></div>
<script type = 'text/javascript'>
document.getElementById('div').addEventListener('click',happen(),true);
function happen()
{
alert(1)
}
</script>
</body>
</html>
In the above code why the event is triggered when the page loads and not triggered when i click on the div...Also which is the correct event name click or onclick....
It's because you've immediately called the function, and passed its null result to addEventListener().
It should be:
document.getElementById('div').addEventListener('click',happen,true);
If you want to pass arguments to happen, you'd have to write this:
document.getElementById('div').addEventListener('click', function() {
happen(args_here, ...);
}, true);
You're calling the function immediately and passing its return value to addEventListener, just like any other function call.
Take out the ().
This should work:
document.getElementById('div').addEventListener('click',happen,true);
The problem is with this line:
document.getElementById('div').addEventListener('click',happen(),true);
You should should only be passing the name of the function happen but since you added the parentheses, you are passing the result.
Try this instead:
document.getElementById('div').addEventListener('click',happen,true);
As the other answerers have said, taking out the () will fix the problem.
An alternative, and a good practice for OO Javascript, is to wrap the function inside a function(){ }, like so:
document.getElementById('div').addEventListener('click',function(){happen()},true);
That will retain scope if the callback needs to execute within an object (in this case it does not).
The event handler does not need parenthesis
document.getElementById('div1').addEventListener('click',happen,true);

why the function call does not work this way?

This is the script that i tested when the page loads.
window.onload = initAll;
function initAll() {
document.getElementById("pTag").innerHTML = "Hello Java Script !";
}
The above script works fine till i put parenthesis like initAll() during the call. _( window.onload=initAll(); )_ . Nothing happens if use initAll() during function call. It is like the script wasn't there.
Why is it so ?
window.onload expects the value you set for it to be a function (functions are like any other object in JavaScript).
If you put parens after initAll, you actually invoke the function and set window.onload to the function's return value. Since the function does not return anything explicitly, this value is undefined. So in practice you can think of this code:
window.onload = initAll();
function initAll() {
// do something with document
}
as equivalent to this code:
var result = initAll();
window.onload = result;
function initAll() {
return null;
}
I 'm sure you can immediately see why this would not work.
Because you should not execute the function at that line, you should assign an event handler to the window object, which will be triggered/executed once the load event has fired, not the returned value of a function.
However, assigning an event handler window.onload is not recommended, because it will allow for only one handler to be attached. Consider using addEventListener.
Because you're not calling the function directly in the window.onload statement, but you're assigning a function to the onload event. The system will then automatically call your initall function when the event happens. Thats why you need the function itself (without parenthesis), and not the call (with parenthesis)
This has to do with the way Javascript works. Functions also are actually objects, like about everything in javascript.
So basically, you are assigning the "Object" initAll , which happens to be a function, to window.onload . This object is then called when the onload event is triggered, assuming it is a function.
Now, when you are putting parenthesis behind your objects name, you are basically telling it to treat that object like a function and call it. this is not the way how to assign it to a property, like the window.onload property.
window.onload = initAll;
You're binding the initAll function to the onload event of the window object. The function becomes the load handler. Now, when the load event fires at the window object, this function will be invoked.
window.onload = initAll();
You're immediately invoking the function initAll. this invocation returns undefined (in your case), and that undefined value will be assigned to window.onload. Assigning the undefined value to onevent properties obviously has no effect.
When you omit the parentheses in this call:
window.onload = initAll;
You are assigning to the window.onload event the reference value of the function initAll(). This causes the function to execute when the onload event is called because they share the same reference point. When you use the assignment like this:
window.onload = initAll();
You are assigning to the window.onload event the returned value of the function, which in this case is null.

Categories

Resources