What is wrong with this javascript code [duplicate]

Question

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>

This question is similar to: Difference between assigning event handler to method with and without parentheses. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Jan 5 at 7:35

Quentin · Accepted Answer · 2011-11-22 15:38:08Z

8

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).

answered Nov 22, 2011 at 15:38

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave G Over a year ago

Quentin has it right, your code is executing the call the function, not assigning it as the handler.

Sandeep Over a year ago

Easier to understand, but tangled me ... Thank you

Jonathan · Accepted Answer · 2011-11-22 15:39:04Z

6

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>

answered Nov 22, 2011 at 15:39

Jonathan

3351 silver badge1 bronze badge

Comments

gen_Eric · Accepted Answer · 2011-11-22 15:41:52Z

4

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').

answered Nov 22, 2011 at 15:41

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

2 Comments

Sandeep Over a year ago

Good explanation ... Much clear now. I was infact calling the function while I was setting function to event. Very helpful. Thanks

gen_Eric Over a year ago

@insane-36: No problem. Functions in JavaScript can be treated as variables, it's weird. It's because function a(){} is the same as doing var a = function(){}.

solendil · Accepted Answer · 2011-11-22 15:40:02Z

4

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 ? :)

answered Nov 22, 2011 at 15:40

solendil

8,4684 gold badges30 silver badges29 bronze badges

Collectives™ on Stack Overflow

What is wrong with this javascript code [duplicate]

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Linked

Related