New to JS. Function calls by clicking on a link.

Hi,

I'm new to Javascript, and am wondering how I would have 2 links on a page, each one calling a different function.

I'm creating a slideshow for some images.

The links I have on my page are:

In an external javascript script I have the two functions declared:

So I'm wondering how to 'connect' each link on the page to the corresponding function.

If anyone can advise me how to go about this I'd be extremely grateful.

Thanks!!

 

<a href="#" onclick="nextImageFunc();return false">Next</a>
<a href="#" onclick="previousImageFunc();return false">Previous</a>

In short, onclick fires when the user click the link. To make it a link, we HAVE TO make a href tag, so just use href="#".
After your function in onclick, we return false, that means, that it wont follow the link (e.g. it wont go to a new page called index.php#) because we tells the browser that all have been handled, and it shouldn't do anymore

 

well no, you don't have to make it a href tag. i find it crap to use anchor links as a means to kill click events.

an alternative solution is to do something like (and this includes NOT using inline onclick= which is a nasty and dated practice)

define a .cursor { } in css to have the hand/pointer. this way you can inherit the style / appearance of a link w/o it being one.

<a name='mylink' id='mylink' class='cursor'>next</a>
<script type="text/javascript">
document.getElementById("mylink").onclick = function(e) {
    // do something. 
};
</script>

PHP:

if you use a framework like mootools or jquery, you'd do:

$("mylink").addEvent("click", function(e) {
e.preventDefault();
// do something
}); //mootools

have fun.

 

If you don't use a href inside an a tag, the cursor wont change to a hand when hovering etc.
I'll find that more crappy than having href="#" inside the tag.

 

ER. that is crap if it were to happen but my post says very clearly:

define a .cursor { } in css to have the hand/pointer. this way you can inherit the style / appearance of a link w/o it being one. thanks for letting us know how you felt though!

 

Yeah, I know that. Perhaps you should have written he could use .cursor{cursor: pointer} instead of just telling him it is possible

And to make it fully crossbrowser (for mobile devices, low-end browsers etc. and, of course GoogleBot), you'll need to make a static page for the paging too and then put it into the href tag. Then, if the browser supports javascript+ajax, it will use your ajax script, if not, it will follow the link to the static paging.