How can I write a non-clickable link that runs a javascript function upon click?

Question

I know this question was answered before, here: javascript:void(0) or onclick="return false" for <a> - which is better?

However, the solution did not work for me.

Here's the applicable code:

HTML:

<a id="Skip">Skip</a>

Javascript:

   var Skip = document.getElementById("Skip");
   Skip.addEventListener('click', reloadPage(), true);

   function reloadPage() {
        window.location.href = "play.php";
    }

When I click on "Skip," nothing happens. I would like to keep the window.location.href method of reloading as I'd like to add $_GET variables to it.

`href="#"` and use `return false` to stop the # being added to the url in your browser. — Sir, Jul 13 '13 at 22:57
In Javascript, you need be careful about function() or function — well, Jul 13 '13 at 23:00

score 6 · Accepted Answer · answered Jul 13 '13 at 22:57

6

Skip.addEventListener('click', reloadPage(), true);
//                                       ^^-------------------

Should be:

Skip.addEventListener('click', reloadPage, true);

You want the callback to be reloadPage not what reloadPage returns.

answered Jul 13 '13 at 22:57

gdoron

147,333
58
291
367

This still doesn't do anything. Here's a jsFiddle with test code. http://jsfiddle.net/m2B2M/1/ – JVE999 Jul 13 '13 at 23:18
1

That JSFiddle was not working because you had a syntax error - getElementByID instead of getElementById. Check this out - it's working. It will not redirect to http://www.google.com because that violates the same origin policy, but I threw in an alert to show you the code was being called. http://jsfiddle.net/m2B2M/3/ On clicking it will alert, and if you watched a console you would get an error like "Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." (on Chrome), but it should work for you. – p e p Jul 13 '13 at 23:31
Alright. This answer with a couple fixes (I didn't know that each was treated differently) fixed it! Thanks. – JVE999 Jul 14 '13 at 00:18

score 2 · Answer 2 · answered Jul 13 '13 at 23:10

Basically you have pass function pointer to addEventListener. So that when click happen it calls that method. You don't want to call the method coz that return nothing

For eg :

Skip. addEventListener('click', reloadPage, true);

you can also do like what you have written but only if your method return another function

for eg

Skip. addEventListener('click', reloadPage(), true);
function reloadPage() {
     return function(){
        // do something interesting.
     }
}

How can I write a non-clickable link that runs a javascript function upon click?

2 Answers2