javascript - 如何让按钮每次单击时调用不同的功能？

Question

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

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

我有 3 个函数，我想用同一个按钮调用它们，就像这样：

第一次点击通话func1()，

第二次点击通话func2()，

第三次点击通话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");
}

标签： javascriptweb

Answer 1

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>