How to call JavaScript function instead of href in HTML

Question

I have some mockup in HTML

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

I got the response from server when I sent the request.

With this mockup I got as a response of AJAX request that sends my code to server.

Well, everything is fine but when I click on the link the browser wants to open the function as link; meaning after click I see the address bar as

javascript:ShowOld(2367,146986,2)

means browser thing that's url if I want to do this in firebug that's work. Now I want to do that then when anyone clicks the link then the browser tries to call the function already loaded in the DOM instead of trying to open them in browser.

Similar question is answered in Stackoverflow itself. https://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick/11348403#11348403 — Scaria Sebastian, Aug 08 '16 at 05:29

Dutchie432 · Accepted Answer · 2019-08-28T17:23:09.440

228

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');">

edited Aug 28 '19 at 17:23

answered Feb 15 '11 at 12:56

Dutchie432

28,798
20
92
109

How to pass a string escaping double quotes in the arguments? H=The example has only integers. – jeffry copps Apr 07 '18 at 06:08
2

@jeffrycopps try single quotes inside your function – ineedme Aug 21 '19 at 23:41
1

@ineedme Answer Updated with that information. Thanks. – Dutchie432 Aug 28 '19 at 17:23

score 12 · Answer 2 · answered Feb 15 '11 at 13:03

12

If you only have as "click event handler", use a <button> instead. A link has a specific semantic meaning.

E.g.:

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

answered Feb 15 '11 at 13:03

Felix Kling

795,719
175
1,089
1,143

Is there any way to make a button look like a link instead of a button? – Ben Page Feb 15 '11 at 13:17
@Ben Page: Yes, with CSS. At least you get a good approximation. See my answer and the comments here: http://stackoverflow.com/questions/4842953/or-javascriptvoid0/4842962#4842962 – Felix Kling Feb 15 '11 at 13:20

score 7 · Answer 3 · answered Feb 15 '11 at 12:59

7

Try to make your javascript unobtrusive :

you should use a real link in href attribute
and add a listener on click event to handle ajax

answered Feb 15 '11 at 12:59

soju

25,111
3
68
70

`href` is optional, just omit it. – Colin 't Hart Mar 12 '20 at 17:33
An a tag is an anchor; it doesn’t have to have a link. – Colin 't Hart Mar 12 '20 at 22:25

score 6 · Answer 4 · answered Sep 03 '14 at 16:28

6

I use a little CSS on a span to make it look like a link like so:

CSS:

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML:

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

JAVASCRIPT:

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

answered Sep 03 '14 at 16:28

tolsen64

881
1
9
22

The above 'url' function parameter gives me string "url" instead of actual url – visrahane Mar 02 '18 at 09:08
You're supposed to put the actual URL in the showWindow function. For example: javascript:showWindow('https://stackoverflow.com'); – tolsen64 Mar 04 '18 at 07:09
I cannot hard code that as I am creating it using dom and I have no control over the url – visrahane Mar 04 '18 at 21:49

score 3 · Answer 5 · edited Jan 23 '20 at 09:31

3

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

edited Jan 23 '20 at 09:31

shwz

426
1
6
22

answered Feb 15 '11 at 12:56

nico

83
1

9

Not the best solution as this will jump to the top of the page. – Alex May 01 '13 at 09:55
1

For href instead of `#` use `href="javascript:void(0)` – Narayan Apr 05 '19 at 09:37
1

`href` is optional, just omit it. – Colin 't Hart Mar 12 '20 at 17:32

score 3 · Answer 6 · answered Feb 15 '11 at 13:02

3

Your should also separate the javascript from the HTML.
HTML:

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

javascript:

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

Just make sure the last line in the ShowOld function is:

return false;

as this will stop the link from opening in the browser.

answered Feb 15 '11 at 13:02

hellsgate

5,905
5
32
47

1

`href` is optional, just omit it. – Colin 't Hart Mar 12 '20 at 17:32

score 0 · Answer 7 · answered Feb 06 '20 at 13:21

0

href is optional for a elements.

It's completely sufficient to use

<a onclick="ShowOld(2367,146986,2)">link text</a>

answered Feb 06 '20 at 13:21

Colin 't Hart

7,372
3
28
51

How to call JavaScript function instead of href in HTML

7 Answers7

Linked