1

Suppose that we have:

<input type="button" name="button" value="Validate Payment" onclick="Validate()" />

We can put in the onclick:

  1. onclick="Validate"
  2. onclick="Validate()"
  3. onclick="Validate();"

My question is what is the difference between these 3 implementation

hdoghmen
  • 3,175
  • 4
  • 29
  • 33
  • I'm assuming you're doing this inline as an attribute of an HTML element? – Shmiddty Nov 28 '12 at 16:41
  • Welcome to Stack Overflow. You can format source code with the `{}` toolbar button and see what it looks like in the bottom preview panel (I've done it for you this time). – Álvaro González Nov 28 '12 at 16:42
  • The difference is the first one won't do anything. – Shmiddty Nov 28 '12 at 16:43
  • 1
    As a side note, all three of your examples are bad practice. [Event handlers should always be bound in javascript](http://en.wikipedia.org/wiki/Separation_of_concerns#HTML.2C_CSS.2C_JavaScript_and_PHP). – jbabey Nov 28 '12 at 16:44

4 Answers4

6
  1. Will not execute the function, it will return the function (try: console.log(Validate))
  2. Will execute the function.
  3. Will, exactly like #2, execute the function.

So there's no difference between #2 and #3, functionally.

Please note that inline event handlers are bad practice, like mentioned in this comment by jbabey.

Community
  • 1
  • 1
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
0

The difference between onclick="Validate();" and onclick="Validate()" is non existant. Semicolons are optional in javascript, so your code will be the same.

To understand the difference between onclick="Validate" and the other two, you need to understand a little about the use of parenthesis in Javascript.

Bascially, 

onclick="Validate()"

will execute the function "Validate" and return whatever that function returns. 

onclick="Validate"

will return the actual function "Validate".

See here for a fuller explaination: javascript syntax: function calls and using parenthesis

Community
  • 1
  • 1
CBA
  • 437
  • 4
  • 10
  • Actually, semicolons are for separating commands, and would be required if multiple function calls are passed. – paddotk Nov 28 '12 at 19:20
  • But in the implementation above, the semicolon makes no difference. – CBA Nov 29 '12 at 10:29
0

The parentheses () after the function name represent 'void', which is - at least by default - neccesary to execute the function properly. In some cases you would need to type in something between those parentheses, which is called 'passing a value' along with the function.

Since this (the 'void' thing) is almost, but not exactly, the same for a lot of similar programming languages (php, Actionscript, etc), and it's kind of a vague thing, I can't tell you exactly what this is for in JS though.

The difference between onclick="Validate()" and onclick="Validate();" is in terms of functionality nothing. The semicolon ; separates pieces of code from each other, so it would be required if you would call another function after the Validate() function. In this case, there's no difference betweeen onclick="Validate()" and onclick="Validate();".

paddotk
  • 1,359
  • 17
  • 31
-2

There's no difference between them.

Brenton Fletcher
  • 1,280
  • 10
  • 15
  • Shoosh it if you don't know. – paddotk Nov 28 '12 at 19:10
  • Actually, there is no difference, and your answer basically says exactly the same thing. Unlike a couple of the other answerers (it seems), I actually tested the 1st way, and it does work (in chrome 25 at least). – Brenton Fletcher Nov 29 '12 at 05:16
  • I take that back; I tried it on an existing page in chrome and it worked, however I created a page to test it and it didn't work then. Apologies; it may depend on the document mode. – Brenton Fletcher Nov 29 '12 at 05:22
  • Alright, no hard feelings :) See my answer to the question for a basic (I'm no expert on this either) explanation about the difference. – paddotk Nov 30 '12 at 13:29