javascript - Toggle multiple functions sequentially on button click - Stack Overflow

I have a set of independent functions - fn1(), fn2(), fn3(), fn4().

I only need one function running at a time but the functions should toggle, on click of a single button, in a sequence fn1() [click] fn2() [click] fn3() [click] fn4() [click] back to fn1()

How do I approach this problem?

I have a set of independent functions - fn1(), fn2(), fn3(), fn4().

I only need one function running at a time but the functions should toggle, on click of a single button, in a sequence fn1() [click] fn2() [click] fn3() [click] fn4() [click] back to fn1()

How do I approach this problem?

• javascript
• jquery

Share Improve this question Follow edited Aug 24, 2017 at 8:42 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Aug 24, 2017 at 8:40 Atul KumarAtul Kumar 15911 gold badge33 silver badges1515 bronze badges 3

• It's really not clear what you're asking. Are you saying that on each successive click of an element a different function should be run? – Rory McCrossan Commented Aug 24, 2017 at 8:42
• @RoryMcCrossan exactly – Atul Kumar Commented Aug 24, 2017 at 8:44
• I added an answer for you – Rory McCrossan Commented Aug 24, 2017 at 8:50

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

If I've understood what you're trying to do, you want to run a different function on successive clicks on a single element.

To do that you can put each function in an array, then run through each one using the modulo operator to return to the start of the array once the end is reached, something like this:

var functions = [function() {
  console.log('first');
}, function() {
  console.log('second');
}, function() {
  console.log('third');
}, function() {
  console.log('fourth');
}];

$('button').click(function() {
  var i = ($(this).data('i') + 1) || 0;
  functions[i % functions.length]();
  $(this).data('i', i);
});
  

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>

You can use a closure to keep track of which function you want to execute.

Html:

<button type="button" onclick="foo()"></button>

Js:

var foo = (function() {
    var funcIndex = 0;
    return function() {
        switch(funcIndex) {
            case 0: func1(); break;
            case 1: func2(); break;
            case 2: func3(); break;
            case 3: func4(); break;
        }

        funcIndex = (funcIndex+1) % 4;
    }
})();

function fn1(){}
function fn2(){}
function fn3(){}

var i = 1;

function myclick(){
   if (i == 1)
      fn1();
   elseif (i == 2)
      fn2();
   elseif (i == 3) {
      fn3();
      i = 1;
   }

   i++;
}

Everytime you call myclick, it runs one fn and then adds 1 to i. The next time it runs the 2nd fn, followed by the 3rd.

<button onclick="toogle()">Click Me</button>  

Then

var index = 0;
var funcArr= [f1,f2,f3,f4];
function toogle(){
  funcArr[index]();
  index++;
  index = index%funcArr.length;
}

function f1(){console.log("f1")};
function f2(){console.log("f2")};
function f3(){console.log("f3")};
function f4(){console.log("f4")};

https://jsfiddle/8chvusaq/

arr=[fn1,fn2,fn3,fn4];
var i=0;
$("buttonId").click(function(){
   arr[i%4]();
   i++;
})

You can try this approach :

function fn1()
{
    //do something
    $("#myButton").off("click");
    $("#myButton").click(fn2);
}

function fn2()
{
    //do something
    $("#myButton").off("click");
    $("#myButton").click(fn3);
}

function fn3()
{
    //do something
    $("#myButton").off("click");
    $("#myButton").click(fn4);
}

function fn4()
{
    //do something
    $("#myButton").off("click");
    $("#myButton").click(fn1);
}

$("#myButton").click(fn1);