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
– I Hate Lazy, Commented Nov 8, 2012 at 14:14
Also, here's a tip: you can use the single quote ' to avoid conflicts with its big brother ". — irrelephant
– irrelephant, Commented Nov 8, 2012 at 14:14
Here's some documentation for the <a> tag: developer.mozilla.org/en-US/docs/HTML/Element/a - it inherits the element interface, which supports onclick events developer.mozilla.org/en-US/docs/DOM/element — Deestan
– Deestan, Commented Nov 8, 2012 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
– Jasper, Commented Nov 8, 2012 at 14:16
I added the code snippet... I still cant figure out whats wrong with it — Goaler444
– Goaler444, Commented Nov 8, 2012 at 14:31

Community · Accepted Answer · 2017-05-23 10:24:41Z

2

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.

1 Comment

Goaler444 Over a year ago

It worked thanks :). But why did you need to close the script? The one for jquery that is ?

Riaan Walters · Accepted Answer · 2012-11-08 14:20:23Z

0

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>

answered Nov 8, 2012 at 14:20

Riaan Walters

2,6862 gold badges22 silver badges30 bronze badges

Comments

Eli Gassert · Accepted Answer · 2012-11-08 14:22:57Z

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>

Collectives™ on Stack Overflow

Calling a javascript function by using onClick in a hyperlink

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related