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

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

• php
• javascript
• html

• 3 Yes you can do that. Make sure your counter function is global, and your a has something visual to click. – I Hate Lazy Commented Nov 8, 2012 at 14:14
• 5 Also, here's a tip: you can use the single quote ' to avoid conflicts with its big brother ". – irrelephant Commented Nov 8, 2012 at 14:14
• Here's some documentation for the <a> tag: developer.mozilla/en-US/docs/HTML/Element/a - it inherits the element interface, which supports onclick events developer.mozilla/en-US/docs/DOM/element – Deestan Commented Nov 8, 2012 at 14:16
• 2 This is valid. (I'd generally remend 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 Commented Nov 8, 2012 at 14:16
• I added the code snippet... I still cant figure out whats wrong with it – Goaler444 Commented Nov 8, 2012 at 14:31

3 Answers 3

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

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>

To add more context to the ments above, here's a working example. Where I put the HTML ment 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/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>