How to do toggle between functions?

Question

HTML

<button type="button" class="btn" name="showAllBtn" onClick="showAllSteps()">Show all</button>

JS

function showAllSteps()
{
//code  
}
function nextStep()

{
//code
}

If i click on show all button it should toggle between these two functions.Can anyone please help me ?

So you wan't the click listener to alternate between ```showAllSteps()``` and ```nextStep()``` whenever the button is clicked? — kkaosninja, May 14 '16 at 16:18
yes whenever the button is clicked,i want it to toggle between those functions — , May 14 '16 at 16:20

Rajaprabhu Aravindasamy · Answer 1 · 2016-05-14T16:32:39.160

You can do it by using dataset for storing the click state,

document.querySelector("button[name='showAllBtn']").addEventListener("click",function(){
  var state = this.dataset.clicked;
  state = state || true;
  ((state) ? showAllSteps : nextStep)();
  this.dataset.clicked = !state;  
},false);

Edit: True/false seems to cause some problem with the above code. Hence I have made some tweak above and given it below.

document.querySelector("button[name='showAllBtn']").addEventListener("click",function(){
  var state = this.dataset.clicked;
  state = typeof state == "undefined" ? "Y" : state;
  ((state == "Y") ? showAllSteps : nextStep)();
  this.dataset.clicked = (state == "Y") ? "N" : "Y"; 
},false);

DEMO

j3ff · Answer 2 · 2016-05-30T12:17:28.233

0

function showAllSteps() {
    alert('showAllSteps');    
    expectedFunc = function() { nextStep(); };
}

function nextStep() {
    alert('nextStep');     
    expectedFunc = function() { showAllSteps(); };
}

function toggleFunction() {
    expectedFunc();
}

var expectedFunc = function() { showAllSteps(); };

<button type="button" class="btn" name="showAllBtn" onclick="toggleFunction()">Show all</button>

JsFiddle here (updated for IE): https://jsfiddle.net/t0g6ayhq/2/

edited May 30 '16 at 12:17

answered May 14 '16 at 16:37

j3ff

4,539
5
35
45

Thanks! can you explain what this is =() => ??do you have any explanation for this?? – May 23 '16 at 09:47
@RamyaSelvaraj this is how you affect a function to a variable so it can be invoke later. Here is an interesting post on that matter http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname – j3ff May 24 '16 at 15:42
It is not working in IE...what is the replacement for this code in IE? – May 30 '16 at 05:43
@RamyaSelvaraj check the updated fiddle, it is now working in IE ... seems like it doesn't like the arrow function expression. – j3ff May 30 '16 at 12:16

How to do toggle between functions?

2 Answers2

DEMO