0

I have my code like this and I want to call an JavaScript function which returns an website link. Which link I want to be the value of href="" attribute. So somewhere I got the solution to do so. But there wasn't defined that why to do so. Here's my code. I want to know why to call javascript function inside href attribute href="javascript:functionname()" is to be written rather than href="functionname()".

function hyperlinker(){
  document.location.href="https://www.google.co.in";
  }
<a href="javascript:hyperlinker()"> click to get new page </a>
DevashishBhor
  • 7
  • 5
  • 1
    I guess you *can*, but you really [shouldn't do either](https://stackoverflow.com/a/59539045): look up `addEventListener` – CertainPerformance Sep 21 '20 at 19:56
  • My guess is that it will interpret `javascript:` as a protocol much like it would interpret `http://` as a protocol otherwise it defaults to routing to some theorhetical route called `functionname()` on your server. – zero298 Sep 21 '20 at 19:56
  • Can't you just do `onclick`? Why do you specifically need `href` – Spectric Sep 21 '20 at 20:07
  • @HereticMonkey That question is specifically about a `javascript:` link with no code. It also doesn't answer this question about why you need the `javascript:` prefix. – Barmar Sep 21 '20 at 20:07
  • @HereticMonkey That's an answer to a question that wasn't actually asked. – Barmar Sep 21 '20 at 20:09
  • It doesn't really answer the question of why you can't just write `href="somefunc()"` – Barmar Sep 21 '20 at 20:10
  • @HereticMonkey I tried, couldn't find one. I saw that one and rejected it. – Barmar Sep 21 '20 at 20:11
  • Better dupe: [When do I need to specify the JavaScript protocol?](https://stackoverflow.com/q/2321469/215552) – Heretic Monkey Sep 21 '20 at 20:20

1 Answers1

2

Having an anchor like

<a href="somefunc()">Click Me</a>

Would be interpreted as "try to navigate to the route somefunc()". So you would be sent to http://www.example.com/somefunc(). Where http: is the protocol of the current page you're on.

The javascript:, much like the http: and the mailto: and the tel: as well as any other prefix like that is the protocol to use. If you leave it off, you're leaving it up to the browser's default behavior. For relative URLs (which is what you have written), it will default to http: (Thanks Barmar)

You don't need to include the protocol (the browser uses HTTP by default) or the port (which is only required when the targeted Web server is using some unusual port), but all the other parts of the URL are necessary.

See MDN <a/> Tag href:

href

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

  • Sections of a page with fragment URLs
  • Pieces of media files with media fragments
  • Telephone numbers with tel: URLs
  • Email addresses with mailto: URLs
  • While web browsers may not support other URL schemes, web sites can with registerProtocolHandler()

If your intention is to call some JavaScript function though, you shouldn't use href anyway, that's what onclick is for, or better still addEventListener() and if the anchor won't be "taking you anywhere", use a <button/> for accessibility.

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

zero298
  • 25,467
  • 10
  • 75
  • 100
  • It's not "guessing". If you leave the protocol off, it defaults to the same protocol as the current URL. – Barmar Sep 21 '20 at 20:12
  • @Barmar Yeah, that's the bit that I'm looking for. I can't find where it defaults to the current protocol. – zero298 Sep 21 '20 at 20:13
  • 1
    See the section on relative URLs here: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL – Barmar Sep 21 '20 at 20:14