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.

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.

• javascript
• html

• 1 What is the "correct" option? neither, use node.addEventListener – Paul S. Commented Jun 5, 2013 at 17:45

3 Answers 3

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.

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.

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 pared to anchor tag.