CODEWITHSUNDEEP
javascript
Ahmad Adel
Ahmad Adel

Reputation: 59

how to make a button call different function every-time it's clicked?

How do I make a button call different function every time it's clicked?

    <button id="OpenGoogle">
        Open Google, facebook, instagram
    </button>

I have 3 functions and I want call them with the same button, like that:

1st click calls func1(),

2nd click calls func2(),

3rd click calls func3(),

function func1(){
    window.open("https://www.gmail.com");
}

function func2(){
    window.open("https://www.facebook.com");
}

function func3(){
    window.open("https://www.instagram.com");
}

Upvotes: 1

Views: 632

Answers (4)

Unmitigated
Unmitigated

Reputation: 89314

Store all the functions inside an array and keep track of the index.

function func1() {
  console.log("https://www.gmail.com");
}
function func2() {
  console.log("https://www.facebook.com");
}
function func3() {
  console.log("https://www.instagram.com");
}
const btn = document.querySelector("#OpenGoogle");
const callbacks = [func1, func2, func3];
let idx = 0;
btn.addEventListener("click", e => {
  callbacks[idx]();
  idx = (idx + 1) % callbacks.length;
});
<button id="OpenGoogle">
  Open Google, facebook, instagram
</button>

Upvotes: 4

Mister Jojo
Mister Jojo

Reputation: 22320

Just use an array with usefull information

// guess who..
const buttonOpens = document.getElementById('OpenOne')

// adding button infos
buttonOpens.toOpen =
  [ { lib:'Open <b>Google</b>, facebook, instagram', url:'https://www.gmail.com' }
  , { lib:'Open Google, <b>facebook</b>, instagram', url:'https://www.facebook.com' }
  , { lib:'Open Google, facebook, <b>instagram</b>', url:'https://www.instagram.com' }
  ]
buttonOpens.activ = 0 

// initialize
buttonOpens.innerHTML = buttonOpens.toOpen[buttonOpens.activ].lib 

buttonOpens.onclick =()=>
  {
  console.clear()
  console.log( buttonOpens.toOpen[buttonOpens.activ].url )
//  window.open(buttonOpens.toOpen[buttonOpens.activ].url)  

  //set the next ( circular )
  buttonOpens.activ = ++buttonOpens.activ % buttonOpens.toOpen.length 
  buttonOpens.innerHTML = buttonOpens.toOpen[buttonOpens.activ].lib
  }
<button id="OpenOne"> Open One?</button>

Upvotes: 1

Sven.hig
Sven.hig

Reputation: 4519

function func1(){
    console.log("goo");
}

function func2(){
    console.log("fac");
}

function func3(){
    console.log("insta");
}

const btn = document.querySelector("#OpenGoogle");
funcs = [func1, func2, func3];
let i = 0;

btn.addEventListener("click", e => {
   funcs[i]();
   i++;
   if (i >= funcs.length) i = 0;
       
});
<button id="OpenGoogle">
  Open Google, facebook, instagram
</button>

Upvotes: 4

Vivek Jain
Vivek Jain

Reputation: 2864

I don't think you can do this directly. But you can do by it maintaining the last executed function in your js. Create one main function using this function call the desire functions

    var lastExeFun = 3;
    function funcMain() {
       switch (lastExeFun) {
         case 1: 
          func2();
          break;

         case 2: 
          func3();
          break;

         case 3: 
          func1();
          break;
       }
       
       lastExeFun = lastExeFun >= 3 ? 1 : (lastExeFun + 1)
    }
    
    function func1(){
        // window.open("https://www.gmail.com");
        console.log('func1');
    }
    
    function func2(){
        // window.open("https://www.facebook.com");
        console.log('func2');
    }
    
    function func3(){
        // window.open("https://www.instagram.com");
        console.log('func3');
    }
<button onClick="funcMain()">Click Me</button>

Upvotes: 1

Related Questions