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

by

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="https://stackoverflow.com/questions/11823290/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="https://stackoverflow.com/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).

More Related Contents:

  1. How do I use ‘this” keyword in an object literal? [closed]
  2. What Code is this ??? {{phrase.addAdministrator}} [closed]
  3. Javascript rock paper scissors project
  4. Javascript return in Function
  5. What is the difference between a function call and function reference?
  6. Define a global variable in a JavaScript function
  7. JavaScript variable number of arguments to function
  8. Why use named function expressions?
  9. Passing an array as a function parameter in JavaScript
  10. How to get the function name from within that function?
  11. How can I create an Asynchronous function in Javascript?
  12. Is there currently anyway to concatenate two or more string literal types to a single string literal type in TypeScript right now?
  13. Javascript Array of Functions
  14. how do I compare 2 functions in javascript
  15. Javascript Image Url Verify
  16. Strange JavaScript idiom – what does “/xyz/.test(function(){xyz;})” do?
  17. Return value from nested function in Javascript [duplicate]
  18. functions inside or outside jquery document ready
  19. javascript named function expressions – scope accessibility [duplicate]
  20. jQuery call function from a string [duplicate]
  21. $http.get(…).success is not a function
  22. How can I use optional chaining with arrays and functions?
  23. Is it better to return `undefined` or `null` from a javascript function? [closed]
  24. Javascript: Extend a Function
  25. onClick Function “this” Returns Window Object
  26. Javascript – Precedence in hoisting
  27. Lambda function syntax in JavaScript without curly braces
  28. What are the different ways of writing an IIFE? What are their use cases?
  29. How to get function body text in JavaScript? [duplicate]
  30. Why can’t I use a Javascript function before its definition inside a try block?

Leave a Comment