How To Use A Link To Call Javascript?
A:
I think you can use the onclick event, something like this:
<a onclick="jsFunction();">
David Zaslavsky
2009-03-27 01:36:31
A:
<a onclick="jsfunction" href="#">
or
<a onclick="jsfunction" href="javascript:void(0);">
fluid_chelsea
2009-03-27 01:38:34
I'd recommend the second one, as the first one scrolls you to the top of the page.
Matt Grande
2009-03-27 01:39:48
Yep it definitely will, unless you add a "return false;" after your function.
fluid_chelsea
2009-03-27 01:40:56
Yes, use the 2nd suggestion
TravisO
2009-03-27 01:50:36
This is 1998 code. Use one of the unobtrusive solutions. Please.
Andrew Hedges
2009-03-27 02:05:39
Use neither one! Links are for linking, they're not dummy elements to call javascript.
I.devries
2009-03-27 07:19:27
if your going to put javascript inline do it this way:<a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow
2009-03-28 15:34:12
This should not be the answer
Josh Stodola
2009-03-29 04:44:08
+4
A:
Or, if you're using PrototypeJS
<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff
Event.stop(event);
}
</script>
<a href="#" id="thelink">This is the link</a>
Mark Biek
2009-03-27 01:43:58
It's the only way to go. Please vote down the inline answers. It's a practice for which there is no excuse these days.
Andrew Hedges
2009-03-27 02:07:08
@Andrew: Please leave a comment along with your downvote explaining why the inline answers are bad.
Bill the Lizard
2009-03-28 14:36:43
+13
A:
Unobtrusive JavaScript, no library dependency:
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
return false;
}
}
</script>
</head>
<body>
<a ID="mylink" href="http://www.google.com">linky</a>
</body>
</html>
EndangeredMassa
2009-03-27 01:50:52
Can you explain why this is better than the currently accepted answer, and where the script should go in the page (because this is pretty clearly a beginner-level question)?
Bill the Lizard
2009-03-28 14:42:21
+2
A:
And, why not unobtrusive with jQuery:
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});
HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>
Mister Lucky
2009-03-27 01:54:02
+1
A:
Unobtrusive Javascript has many many advantages, here are the steps it takes and why it's good to use.
the link loads as normal:
<a id="DaLink" href="http://host/toAnewPage.html">click here</a>
this is important becuase it will work for browsers with javascript not enabled, or if there is an error in the javascript code that doesn't work.
javascript runs on page load:
window.onload = function(){ document.getElementById("DaLink").onclick = function(){ if(funcitonToCall()){ // most important step in this whole process return false; } } }if the javascript runs successfully, maybe loading the content in the current page with javascript, the return false cancels the link firing. in other words putting return false has the effect of disabling the link if the javascript ran successfully. While allowing it to run if the javascript does not, making a nice backup so your content gets displayed either way, for search engines and if your code breaks, or is viewed on an non-javascript system.
best book on the subject is "Dom Scription" by Jeremy Keith
Fire Crow
2009-03-28 15:27:43