13

what is the difference between

<a onclick="someFunction">

and

<a onclick="someFunction()">

One uses the parenthesis and not the other, but what are the differences of using either? What is the "correct" option? And what happens if i dont use any href attribute?

As far as I know, in javascript, using something = someFunc(); assigns the return value of that function to the something variable. And using something = someFunc; assigns the function directly (not its result) to that variable (And it's mostly used to assign functions to events). e.g. I can assign a function to a onclick event.

But what I don't understand is what happens when using either in some html element inline event, as in the examples, since the assignation is not to a javascript variable, but to an html attribute, which happens to be an event? Please explain.

And also, is there a difference on assigning a inline onclick function to an anchor (a) that to other elements (e.g. span div label etc)? Do they have the same effect?

Sidenote: I've been reading here about how to run a function when clicking on a link, and I already understood is that is should not be done "inline", but instead using unobtrusive javascript. (I mention it to avoid debate about that), but in the examples I've seen they don't mention the difference of both options I mention when doing it inline.

Edit: This question was made because here they gave an answer which doesn't use the parenthesis in the function for the event, and nobody mentioned the parenthesis were needed, so I assume it is valid. yet I don't know what is the difference of using () or not.

Community
  • 1
  • 1
DiegoDD
  • 1,625
  • 4
  • 21
  • 32
  • 1
    `What is the "correct" option?` neither, use [`node.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener) – Paul S. Jun 05 '13 at 17:45

3 Answers3

6

One uses the parenthesis and not the other, but what are the differences of using either?

<a onclick="someFunction"> won't do anything. The parenthesis cause a function to be called.

Having a statement consisting of nothing but an identifier (be it a function name, variable, or whatever) won't do anything (except throw a reference error if the variable doesn't exist).

And what happens if i dont use any href attribute?

Then I'd question why you were using an <a> element in the first place.

And also, is there a difference on assigning a inline onclick function to an anchor (a) that to other elements (e.g. span div label etc)?

Only that they aren't (by default) focusable elements (nor is an a element without an href attribute), so the click event couldn't be triggered by tabbing to the element and pressing enter. If you want an element that will do something with JS when triggered, and you don't have a sensible fallback for when JS isn't available, use a button.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • so, if not using parethesis is "wrong" (as it won't do anything) mean that the accepted answer [here](http://stackoverflow.com/questions/688196/how-to-use-a-link-to-call-javascript) is simply wrong? (that answer was preciselly the one that make me made my question, but didn't find the link before, I'll edit my question here to reflect that) – DiegoDD Jun 05 '13 at 16:36
  • @DiegoDD I think `jsFunction` means `myFunction()` instead of the name of it. – Vitor Canova Jun 05 '13 at 16:44
  • @DiegoDD — It is badly expressed. It probably means "The body of the function definition" when it says "jsfunction". Don't use `onclick` attributes though, follow the principles of [Progressive Enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) and [Unobtrusive JavaScript](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript). Bind your event handlers with `addEventListerner` or a library that abstracts it for compatibility with old browsers. – Quentin Jun 05 '13 at 16:47
  • 1
    @Vitor I now think it too, but since in javascript there IS a difference of using either, it should be specified. thanks. – DiegoDD Jun 05 '13 at 16:50
1

The value of an event handler attribute is a sequence of Javascript statements, not an expression.

It isn't assigning a function value to the property; it's a piece of code to execute at that event.
Leaving out the parentheses, results in an expression statement that has no effect.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • Could you please be more speciffic with the difference between a statement and an expression? – DiegoDD Jun 05 '13 at 17:20
  • @DiegoDD: Statement is a complete executable "line" of code. An expression is a single piece of code that has a value. – SLaks Jun 05 '13 at 17:34
1

when writing inline on click functions, we assigning the code to be executed in the form of string on click of the element.

It is equivalent to eval('someFunction()'); we cannot write on click='someFunction' since it will be equivalent to eval('someFunction') which would do nothing. if you intend to bind a click handler to an anchor tag, dont forget to add a href='#' attribute to the anchor tag.

There is no difference between assigning a click handler to span or divs as compared to anchor tag.

Parthik Gosar
  • 10,998
  • 3
  • 24
  • 16