What is the difference between onClick="javascript: function('value')'" and onClick="function('value');"? [duplicate]

Question

What is the difference between the following?

1. onClick="javascript: function('value');"
2. onClick="function('value');"

When do I use the javascript: before the function call, and why?

Can I call the function without using javascript: prefix?

Please help me understand the difference.

Togliatti

Avoid onclick attributes. – Attractant

the javascript: prefix is only necessary in href, which wouldn't normally contain JS code. – Subaquatic

why the javascript is needed in the href? any help on this please explain me it will very helpful to me to understood the diffrence@Subaquatic – Togliatti

Note that the answer to this applies to any JavaScript in an inline event handler, not just a function call. E.g., you can say onclick="return false;" rather than onclick="javascript:return false;". – Essequibo

it means when i have to use the incline code at that time i have to use the javascript:. am i right?? @Essequibo – Togliatti

No. You just don't ever need javascript: in an inline event handler. – Essequibo

please explain it me in the answer so i can understood it in right way.@Essequibo – Togliatti

Answer 1

In an element's inline event handler, like onclick, onchange, onsubmit, etc., you do not need the javascript: prefix - the reason you often see it is because people confuse it with the href syntax that I explain below. It doesn't cause an error - I believe it is interpreted as a label - but it is unnecessary.

It doesn't matter whether you want to call a function or run a "simple" JS statement, either way don't include javascript: - that is, all three of these are valid:

onclick="doSomething('some val');"
onclick="return false;"
onclick="doSomething(); doSomethingElse(); return false;"

If you are using inline event attributes don't use the javascript: prefix.

(I say "if you are using inline event attributes" because this practice is really outdated: it is better to assign the event handlers using JS in a script block.)

You only need the javascript: prefix when you want to run JavaScript from an <a> element's href attribute like this:

<a href="javascript: someFunc();">Whatever</a>

That is because the browser normally expects the href to contain a URI, so the javascript: prefix tells it to expect JS code instead. However, I don't recommending doing that because the page won't work for people who have JS disabled. Better to include an href that directs the user to a page telling them to enable JS, and include an onclick to do the JS functionality:

<a href="/enableJS.html" onclick="doSomething(); return false;">Whatever</a>

That way the link does something useful for users whether they have JS enabled or not. The return false at the end of the click handler prevents the default behaviour for a click (which would be to navigate to the specified URL).

Essequibo

Answer 2

The first one has a completely redundant label.

When should i have to use the "javascript:" before the function call and what is the reason of use it?

Never. (Well, almost. You do use it in javascript: scheme URIs, but you should only use those if you are writing a bookmarklet, and they wouldn't appear in an onclick attribute).

(javascript: URIs are where the cargo-cult practice of prefixing onclick attribute values with a label came from.)

can i call the function without using "javascript:"??

Yes.

Attractant