CODEWITHSUNDEEP
phpjavascripthtml
Goaler444
Goaler444

Reputation: 2621

Calling a javascript function by using onClick in a hyperlink

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

Upvotes: 1

Views: 10413

Answers (3)

Chase
Chase

Reputation: 29549

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

Upvotes: 2

Eli Gassert
Eli Gassert

Reputation: 9763

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>

Upvotes: 0

Riaan Walters
Riaan Walters

Reputation: 2676

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>

Upvotes: 0

Related Questions