Question

如何使按钮每次单击都调用不同的功能？

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

我有3个功能，我想用相同的按钮调用它们，就像这样：

第一次点击会调用func1()

第二次点击通话func2()，

第3次点击调用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");
}

Answer 1

将所有函数存储在数组中，并跟踪索引。

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]();
  if(idx + 1 < callbacks.length) idx++;
});

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

Answer 2

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>

Answer 3

只需使用具有有用信息的数组

'y'

'z'

Answer 4

我认为您不能直接这样做。但是您可以通过这样做来维护js中最后执行的功能。使用此函数创建一个主要函数，调用期望函数

    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>

如何使按钮每次单击都调用不同的功能？

4 个答案: