Calling a javascript function by using onClick in a hyperlink

Question

I have been looking online, but I have failed to find a direct answer to my question:

Can you use onClick for a tags?

In other words can you do this (note echoed through php)?

echo "<a href=\"#\" id =\"loginbutton\" onClick=\"counter()\"></a>\n";

I tried to run this, but when I click on the link, my counter function is not being called.

The rest of my code snippet:

echo "<script type=\"text/javascript\" src=\"src\jquery\jquery.js\">\n";
echo "function counter(){\n";
echo "alert(\"HELLO WORLD!\");\n";
echo "}\n";
echo "</script>\n";

echo "<a href=\"#\" id =\"loginbutton\" onClick=\"counter()\"></a>\n";

Yes you can do that. Make sure your `counter` function is global, and your `a` has something visual to click. — I Hate Lazy, Nov 08 '12 at 14:14
Also, here's a tip: you can use the single quote `'` to avoid conflicts with its big brother `"`. — irrelephant, Nov 08 '12 at 14:14
Here's some documentation for the `` tag: https://developer.mozilla.org/en-US/docs/HTML/Element/a - it inherits the `element` interface, which supports `onclick` events https://developer.mozilla.org/en-US/docs/DOM/element — Deestan, Nov 08 '12 at 14:16
This is valid. (I'd generally recommend setting events in your javascript, though). If you want to help solving your problem, we'll need to see more of what you are doing, as this isn't where it is going wrong. — Jasper, Nov 08 '12 at 14:16
I added the code snippet... I still cant figure out whats wrong with it — Goaler444, Nov 08 '12 at 14:31
@irrelephant What do you mean? Instead of {"} I use {'} for echo? How will I be able to /n then? — Goaler444, Nov 08 '12 at 14:57
but \n wouldnt work in that case? or? Nonetheless, I could just use
to make it more readable. Thanks for the tip — Goaler444, Nov 08 '12 at 15:04

score 2 · Accepted Answer · edited May 23 '17 at 10:24

Although that should work, it's better practice not to bind events inline. I would suggest looking into addEventListener and for older versions of IE, attachEvent. More information on these can be found in a topic here: Correct usage of addEventListener() / attachEvent()?

If you wait for the window to be ready, you ensure that the element is on the page and defined for you to access it.

window.onload = function(){
   //add any event listeners using the above methods in here
}

Example:

<script>
    window.onload = function(){
      var t = document.getElementById("test");
      t.addEventListener("click", sayHi, false);

      function sayHi(){
       alert("Hi");
      }    
    }

</script>    

<div id="test">test</div>

According to your above echo statements, if you are determined to make it work that way then you can try this:

echo "<script type='text/javascript' src='src/jquery/jquery.js'></script>\n";
echo "<script>\n"
echo "function counter(){\n";
echo "alert('HELLO WORLD!');\n";
echo "}\n";
echo "</script>\n";
echo "<a href='#' id ='loginbutton' onClick='counter()'></a>\n";

notice that I closed the script tag including jQuery and added a new opening tag right below it.

EDIT:

Script tags that reference external resources (via the src attribute) are no longer able to execute script embedded within the tag itself.

Read more here

It worked thanks :). But why did you need to close the script? The one for jquery that is ? — Goaler444, Nov 08 '12 at 14:42

score 0 · Answer 2 · answered Nov 08 '12 at 14:20

Made a little Demo code, Note that the function fires and then the href is followed. You can turn this off with JS by returning false.

<script type="text/javascript">
    function counter() {
        alert("do something here")

        var FollowHref_Or_Not = false;
        // true would simply follow the href after the function is activated
        return FollowHref_Or_Not;
    }
</script>
<a href="/" onclick="return counter()">Test Link</a>

score 0 · Answer 3 · answered Nov 08 '12 at 14:22

To add more context to the comments above, here's a working example. Where I put the HTML comment about simulating an echo, just put your PHP echo line. Also note that I added a return false; This prevents the default link click behavior from executing. Since your href is "#" it would modify your URL to put "#" in the URL so if you used your browser back button you'd still be "stuck" on the same page.

http://jsfiddle.net/6pEbJ/

<html>
    <head>
        <script type="text/javascript">
            function connect()
            {
            alert('connected!');
            }
        </script>
    </head>
    <body>
        <!-- simulated echo result here -->
        <a href="#" onclick="connect(); return false;">Testing</a>
    </body>
</html>

Calling a javascript function by using onClick in a hyperlink

3 Answers3