CODEWITHSUNDEEP
javascript
user12280259
user12280259

Reputation:

3 functions for 1 onclick event

So I have 1 button, and 3 functions. I want one function to run when the button is pressed, but after that, the next time it gets clicked it runs another one, and so on. How would I go on doing that? I tried doing

currentfunc = func1
element.onclick = currentfunc

function func1(){
  //Something
  currentfunc = func2
}
function func2(){
  //Something
  currentfunc = func3
}
function func3(){
  //Something
}

it works on the first click, but after that it stops running functions

Upvotes: 0

Views: 223

Answers (4)

ROOT
ROOT

Reputation: 11622

A better implementation is to use generator, its good to note that its not supported by IE browser :

function* gen() { 
  yield function () { console.log('call 1')};
  yield function () { console.log('call 2')};
  yield function () { console.log('call 3')};
}

let g = gen();

document.getElementById('generator').addEventListener('click', function(e) {
  let callback = g.next();
  if(callback.done) {
    g = gen();
    callback = g.next();
  }
  callback.value();
})
<button id="generator">click me</button>

Upvotes: 0

Niklas
Niklas

Reputation: 1938

You can achieve that by implementing a variable that is saving the current state:

var state = 1;
function func1(){...}
function func2(){...}
function func3(){...}

element.onclick = function() {
  switch (state) {
    case 1:
      state = 2;
      return func1.apply(this, arguments);
    case 2:
      state = 3;
      return func2.apply(this, arguments);
    case 3:
      state = 1; // go back to call func1 next time
      return func3.apply(this, arguments);
  }
}

See:

Upvotes: 1

Dhaval Soni
Dhaval Soni

Reputation: 416

Can you please try this. I have done with Jquery.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


</head>
<body>

<a id="aclick" onclick="func1()">click me</a>
<script>
function func1(){

alert("func1")

 $("#aclick").attr("onclick","func2()")
}
function func2(){

alert("func2")

$("#aclick").attr("onclick","func3()")
}
function func3(){

alert("func3")

$("#aclick").attr("onclick","func1()")
}

</script>
</body>
</html>

Here is in javascript

<!DOCTYPE html>
<html>
<head>



</head>
<body>

<a id="aclick" onclick="func1()">click me</a>
<script>
function func1(){
debugger

alert("func1")
 var a = document .getElementById("aclick");
 a.setAttribute("onclick", "func2()");
}
function func2(){

alert("func2")
 var a = document .getElementById("aclick");
  a.setAttribute("onclick", "func3()");
}
function func3(){

alert("func3")

 var a = document .getElementById("aclick");
   a.setAttribute("onclick", "func1()");
}

</script>
</body>
</html>

Upvotes: 1

Andy
Andy

Reputation: 63524

You could add your functions to an array, implement a counter, and then when the button is clicked call the function that corresponds to the index the counter represents.

const fns = [
  function func1() {
    console.log(1);
  },
  function func2() {
    console.log(2);
  },
  function func3() {
    console.log(3);
  }
];

// Grab the button, and add a listener to it
// The listener calls `createClickFn` with the array -
// the function returns a new function which is assigned to
// the listener
const button = document.querySelector('button');
button.addEventListener('click', createClickFn(fns), false);

// A closure that sets a counter, and returns a function
// that calls the function in the array the index of which
// corresponds to the counter
// When the counter is the same as the length of the array
// set it back to zero
function createClickFn(fns) {
  let count = 0;
  return function () {
    fns[count]();
    count = (count === fns.length - 1) ? 0 : count + 1;
  }
}
<button>Click!</button>

Upvotes: 0

Related Questions