What is the difference between function calls in javascript?

Question

I was asked this question in an interview a JavaScript function like this :

function a(){
 /// ----  Some Code ---
}

Now in a html button click

<button click= "a()">
<button click= "return a()">
<button click= "javascript a()">

What are the difference between these 3 calls?

Related: http://stackoverflow.com/questions/11823290/what-is-the-difference-in-call-of-javascript-function-onclick-javascript-funct — jfrej, Aug 05 '13 at 12:57

score 4 · Answer 1 · answered Aug 05 '13 at 12:47

4

The HTML is invalid, but if you had onclick then:

just a function call.
returns the value of the function call (which, if it is false, would cancel the default action of clicking on the element)
throws a syntax error because you can't have an identifier (javascript) followed by a space, followed by a function call

If the last was javascript:a() then you would have an entirely useless label.

That said, all three are poor examples of HTML. You should avoid onclick in favour of addEventListener.

answered Aug 05 '13 at 12:47

Quentin

914,110
126
1,211
1,335

don't worry about the html i gave it as eg. what is useless label ?? – Arindam Das Aug 05 '13 at 12:50
I linked to the documentation for label in the answer. Labels are used to jump out of loops. There is no loop to jump out of so it is useless. – Quentin Aug 05 '13 at 12:50
ok thanks let me take a look at that .. i didn't know about label so thanks – Arindam Das Aug 05 '13 at 12:54
I think the last one might've been: `` - see http://stackoverflow.com/a/11824068/206614 – jfrej Aug 05 '13 at 12:56
`href="javascript:...` is worse then any of the previous examples. Use `addEventListener`. – Quentin Aug 05 '13 at 12:59

score 4 · Accepted Answer · answered Aug 05 '13 at 12:48

<button onclick= "a()">

Simply runs the function a().

<button onclick= "return a()">

This will run and then evalulate the response from the function a(). If this response is false then then no other further conditions will be run.

<button onclick= "javascript a()">

This will not work. <button click= "javascript: a()"> will be the same result as example 1.

score 0 · Answer 3 · answered Aug 05 '13 at 12:57

The difference between the first and the second, is that the second passes along the return value from the function and makes it the return value of the event handler. That makes it possible for the function to return false to stop the default action of the event. For a button that doesn't make a difference, as there is no default action, but if it was a link it would be useful. Example:

function handleClick() {
  // do something here
  return false;
}

<a href="fallback.html" onclick="return handleClick();">click me</a>

The script will keep the link from navigating to fallback.html.

The third code is incorrect in two ways. As it stands, it causes a syntax error. The example should probably be:

<button onclick="javascript:a()">

Sometimes people put javascript: (not javascript) first in an event handler out of habit, or because they think that it should be there. It comes from using Javascript in an URL in a link:

<a href="javascript:alert('hello')">click me</a>

When used like that, it tells the browser that it's a piece of script to run, not an URL to navigate to. If you use it incorrectly in an event handler, it will instead be interpreted as a label. It won't stop the script from working, because it happens to be valid syntax, but it's useless.

What is the difference between function calls in javascript?

3 Answers3