Javascript onclick event, different function for each click of same element

eventsfunctionjavascriptjqueryonclick

I am attempting to create an onclick function which has 1 of 2 outcomes on each click. In other words, when the user clicks the onclick element for the first time the outcome 1 occurs; then the user clicks the same element a second time, outcome 2 occurs. When the user clicks on the element a third time, outcome 1 happens again; forth click, outcome 2 occurs; and so on, like a loop. Below is some pseudo jQuery to give an illustration…

$(function(){
            var hits = 0;
    $('#myButton').click(function(){
                    if  (var hits = pos ) 
                    {
              $('#content1').fadeIn("slow");
              $('#content2').fadeOut("slow");
                    }
                    else
                    {
              $('#content1').fadeOut("slow");
              $('#content2').fadeIn("slow");
                    }
        return false;
    });
});

I have had a hard time searching for an answer because the terminology can vary tremendously. From 'variable' to 'trigger' to 'array' to 'listener' to 'handler' to 'conditional' to 'bind'…. where do I begin to search? I know there are multiple ways to create my function, but I know this is the best site to go to find the easiest, most efficient way. So on top of helping me out syntactically, I'd also like some terminology help with the cluster of words I listed. I know the general meaning of each term, but when applying them to the scenario/function I am trying to create, where do they each play a part? I think this will help straighten things out for a lot of people. Thanks in advance.

Thank you all for the quick and elaborate, professional feedback. I will use this new knowledge to its advantage. JQuery really does make things simple, almost too easy. However, the main reason I asked this question was to apply it to a keydown function, instead of a click function. I thought I could find an answer and swap some code around, maybe with normal javascript this would have worked. I have posted a new question that uses the knowledge and feedback you all have provided and come up with a different scenario involving the keydown function. I think I have the syntax pretty close thanks to your help, but however, only almost. If you would like to see, here is the url: bind event handler on keydown listen function JavaScript jQuery You guys truly rock.

Best Answer

jQuery has .toggle(handlers) for alternating clicks functionality:

$('#myButton').toggle(function() {
    $('#content1').fadeIn("slow");
    $('#content2').fadeOut("slow");
}, function() {
    $('#content1').fadeOut("slow");
    $('#content2').fadeIn("slow");
});

Fiddle

Now if all you want to do is switch 2 elements by fading them in/out respectively, you can use .fadeToggle():

$('#myButton').click(function() {
    $('#content1, #content2').fadeToggle("slow");
});

Fiddle

Related Topic