Why aren't these two functions toggling on click event?

Question

I'm trying to toggle two functions. When user clicks the pause button, the input fields are disabled, the label is text is changed to grey and the button changes to a different image. I thought I could use .toggle(), but I can't get the two functions to work either -- only the first one function runs (pauseEmailChannel();), not both on toggle click. I found the even/odd clicks detection script here on SO, but that is not "toggling" these two functions on the click event. My code may be ugly code, but I'm still learning and wanted to show how I am thinking -- right or wrong. At any rate, can someone give me a solution to how to do this? I didn't think it would be too difficult but I'm stuck. Thanks.

HTML

jQuery

      $(".btn_pause").click(function(){
    var count = 0;
        count++;
    //even odd click detect 
    var isEven = function(num) {
        return (num % 2 === 0) ? true : false;
    };
    // on odd clicks do this
    if (isEven(count) === false) {
        pauseEmailChannel(); 
    }
    // on even clicks do this
    else if (isEven(count) === true) {
        restoreEmailChannel(); 
    }
     });


    // when user clicks pause button - gray out/disable     
function pauseEmailChannel(){   
        $("#channel-email").css("color", "#b1b1b1");
        $("#notify-via-email").attr("disabled", true);
        $("#pause-email").removeClass("btn_pause").addClass("btn_disable-pause");
}



// when user clicks cancel button - restore default
function restoreEmailChannel(){
        $("#channel-email").css("color", "#000000");
        $("#notify-email").attr("disabled", false);
        $("#pause-email").removeClass("disable-pause").addClass("btn_pause");
        $("input[value='email']").removeClass("btn_disable-remove").addClass("btn_remove");
}

Alexander · Answer 1 · 2013-01-24T18:51:50.167

1

The count variable is initialized and set to 0 every time .btn_pause is clicked. You need to move the variable to a higher scope.

For example,

$(".btn_pause").each(function(){
    var count = 0;
    $(this).click(function(){
        count++;
        ...
    });
});

In this way count is initialized only once and it is accessible in the click event handler.

As an alternative way you can also use:

$(".btn_pause").each(function(){
  var count = 0;
  $(this).click(function(){
    [restoreEmailChannel, pauseEmailChannel][count = 1 - count]();
  });
});

If the previous construct was too abstract, a more verbose one will look like this:

$(".btn_pause").each(function(){
  /* Current element in the array to be executed */
  var count = 0;
  /* An array with references to Functions */
  var fn = [pauseEmailChannel, restoreEmailChannel];
  $(this).click(function(){
    /* Get Function from the array and execute it */
    fn[count]();
    /* Calculate next array element to be executed.
     * Notice this expression will make "count" loop between the values 0 and 1.
     */
    count = 1 - count;
  });
});

edited Jan 24 '13 at 18:51

answered Jan 23 '13 at 19:06

Alexander

23,432
11
63
73

+1 Thanks!(Sidebar: I don't know know the "@Alexander" construct is not working properly). Alexander, I've not seen this type of syntax before -- calling functions in an array. Very cool! I just googled and found example [http://stackoverflow.com/questions/4908378/javascript-array-of-functions](here on SO). Since this syntax is new to me, would you mind explaining why you put the count variable in an array, and that you did not separate each array by a comma? – Chris22 Jan 24 '13 at 15:53
@Chris22, I don't know why it doesn't work for you. Both of them work perfectly for me. These ones are lighter than using `.data()` – Alexander Jan 24 '13 at 17:35
Alexander, no I meant the "@Alexander" is not working for me to target your username on SO, not your code. Your code works great! I was asking to know more about the syntax you used for calling functions in an array. I've not seen it before and it is interesting – Chris22 Jan 24 '13 at 18:45
@Chris22, It's because I will be alerted of any comments in my answer anyways. I updated the answer – Alexander Jan 24 '13 at 18:52
+1 @Alexander Thanks for taking the time to comment your code. I appreciate it! – Chris22 Jan 25 '13 at 15:39

score 1 · Accepted Answer · answered Jan 23 '13 at 19:06

1

try this code. It should work fine, except that I could make a mistake when it is even and when odd, but that should be easy to fix.

  $(".btn_pause").click(function(){
    var oddClick = $(this).data("oddClick");
    $(this).data("oddClick", !oddClick);
    if(oddClick) {
        pauseEmailChannel(); 
    }
    else {
        restoreEmailChannel(); 
    }
  });

answered Jan 23 '13 at 19:06

Viktor S.

12,736
1
27
52

thanks! I understand the conditional statement and the data() method after reading [http://api.jquery.com/data/](jquery data()). Just wondering why you chose to use it? – Chris22 Jan 24 '13 at 16:12
using your code above, I just noticed I have to click the button twice to call the `pauseEmailChannel()`. I want it work on the first click. How should I do this? – Chris22 Jan 24 '13 at 16:46
Because it was simpler to do it like that) If you will take a look at Alexander's approach - it is good also and will work, but it uses a closure (read about it, that is an answer to a question you have posted to Alexander) which is frequently not obvious. Especially to newcomers. – Viktor S. Jan 24 '13 at 16:46
Thanks! Actually as you noted in your answer, the order could be changed, once I changed the order, it worked on first click -- so mybad. Thanks for pointing out a working example of closure! – Chris22 Jan 24 '13 at 16:51

Why aren't these two functions toggling on click event?

2 Answers2