How to Use a Link to Call JavaScript

How to use a link to call JavaScript?

<a onclick="jsfunction()" href="#">

or

<a onclick="jsfunction()" href="javascript:void(0);">

Edit:

The above response is really not a good solution, having learned a lot about JS since I initially posted. See EndangeredMassa's answer below for the better approach to solving this problem.

call javascript function on hyperlink click

Neater still, instead of the typical href="#" or href="javascript:void" or href="whatever", I think this makes much more sense:

var el = document.getElementById('foo');
el.onclick = showFoo;

function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

If Javascript fails, there is some feedback. Furthermore, erratic behavior (page jumping in the case of href="#", visiting the same page in the case of href="") is eliminated.

Call Javascript function from URL/address bar

There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.

There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.

How to call JavaScript function instead of href in HTML

That syntax should work OK, but you can try this alternative.

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

or

<a href="javascript:ShowOld(2367, 146986, 2);">

UPDATED ANSWER FOR STRING VALUES

If you are passing strings, use single quotes for your function's parameters

<a href="javascript:ShowOld('foo', 146986, 'bar');">

How to call javascript from a href?

<a onClick="yourFunction(); return false;" href="fallback.html">One Way</a>

** Edit **
From the flurry of comments, I'm sharing the resources given/found.

Previous SO Q and A's:

• Do you ever need to specify 'javascript:' in an onclick? (and the IE related A's following)
• javascript function in href vs onclick

Interesting reads:

• http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html
• https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/label

JavaScript - href vs onclick for callback function on Hyperlink

Putting the onclick within the href would offend those who believe strongly in separation of content from behavior/action. The argument is that your html content should remain focused solely on content, not on presentation or behavior.

The typical path these days is to use a javascript library (eg. jquery) and create an event handler using that library. It would look something like:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

call javascript function from anchor html tag

You can use either

<a href="javascript:someFunction()">LINK</a>

or

<a href="#" onclick="someFunction(); return false;">LINK</a>

or you can check this link.
anchor tag onclick function

Click link and call javascript and then Open in new tab

The key is not to replace anchor functionality with Javascript. Anchors are designed to take you to a new URL. If you have an anchor, use it as an anchor (eg, set a href on it). Don't bind a click event that uses window.location to redirect to a new url.

Your current anchor has no href. So when you try and open it in a new tab, there's no surprise that nothing loads. You're literally opening nothing in the new tab.

If you really need to set the URL dynamically, then change the href of the element using javascript. For example:

document.getElementById('my-element').href = new_href;

It goes without saying that this needs to be done before the anchor is clicked (not on click). For example, on window.load, or the completion of the function that generates the dynamic URL.

call javascript function on the click event of hyperlink

<td> <a href="#" onclick="getValues('<%=data[i][0]%>','<%=data[i][1]%>','<%=data[i][2]%>');" >Edit</a></td>

function getValues(pID,protID,eq)
{

document.getElementById('txtPlanID').value=pID;
document.getElementById('txtProtID').value=protID;
document.getElementById('txtSeqNo').value=eq;

//show("block");
return false;

}

simply pass values while calling javascript get use it

Cakephp: how to call javascript function in link?

<a href="some_url" onClick="return popup(this, 'popup_name')">my popup</a>

would convert to this in CakePHP:

$this->Html->link('my popup', 'some_url', ['onclick' => 'return popup(this, "popup_name")']);

FYI, You can put any attribute in the third argument of the link() method. The documentation on creating links is pretty extensive and gives examples.

---

Related Topics