CODEWITHSUNDEEP
javascripttoggletogglebutton
user5571323
user5571323

Reputation:

How to do toggle between functions?

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 ?

Upvotes: 0

Views: 204

Answers (2)

j3ff
j3ff

Reputation: 6089

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/

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

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

Upvotes: 1

Related Questions