如何向按钮添加第三个javascript else if语句？

编辑 我的意思是，我如何添加第三个else if语句，在第三次单击时就会触发

基本上，它会在第一次、第二次和第三次单击时打开和隐藏不同的元素

因此，我想再添加一个函数，使这个onclick事件总共有3个函数，这些函数的变化取决于您单击按钮的次数。我只是不知道如何添加第三个函数

        <div class="base" id="base">
        <img src="img/base.svg">
    </div>

    <div class="base one" id="one">
        <img src="img/one.svg">
    </div>


    <div class="base two" id="two">
        <img src="img/two.svg">
    </div>
    <div class="base three" id="three">
        <img src="img/three.svg">
    </div>
    <button class="test" id="test">btn</button>




var action = 1;
test.onclick = function viewSomething() {
if (action == 1) {
    base.style.display = "none";
    one.style.display = "block";
    action = 2;
    console.log(tets)
} else {
    one.style.display = "none";
    two.style.display = "block";
    action = 1;
}

btn
var作用=1；
test.onclick=函数viewSomething（）{
如果（操作==1）{
base.style.display=“无”；
one.style.display=“block”；
行动=2；
控制台日志（tets）
}否则{
one.style.display=“无”；
2.style.display=“block”；
作用=1；
}

---

}

我不确定您所说的第三个函数是什么意思，因为我只能看到

查看某些内容

，但您可以在

if-else

语句中添加

if-else

块：

if (action == 1) {
    base.style.display = "none";
    one.style.display = "block";
    action = 2;
    console.log(tets)
} else if (this == that) {
    // your logic here
} else {
    one.style.display = "none";
    two.style.display = "block";
    action = 1;
}

---

如果您确实需要三个不同的函数（当前有一个函数和两个If语句），则需要使用：

函数clickOne（）{
console.log（“第一个！”）；
}
函数clickTwo（）{
console.log（“第二个！”）；
}
函数clickThree（）{
console.log（“第三个！”）；
}
var测试=document.querySelector（“测试”）；
test.addEventListener（“单击”，单击一个）；
设置超时（（）=>{
test.addEventListener（“单击”，单击两次）；
}, 2000);
设置超时（（）=>{
test.addEventListener（“点击”，点击三次）；
}, 5000);
单击
您已经有了基本设置，只需扩展它：

var action = 1;
test.onclick = function viewSomething() {
if (action == 1) {
    base.style.display = "none";
    one.style.display = "block";
    action = 2;
    console.log(tets)
} else if (action === 2) {
   // ...
   action = 3;
} else if (action === 3) {
    one.style.display = "none";
    two.style.display = "block";
    action = 1;
}

已经说过，如果你总是按顺序从一个“动作”到另一个动作，你可以考虑把每个“动作”移动到一个单独的函数中，将所有这些函数存储到一个数组中，并让单击处理程序简单地提前索引：
const actions = [
  function(event) {
    base.style.display = "none";
    one.style.display = "block";
  },
  function(event) {
    one.style.display = "none";
    two.style.display = "block";
  },
  function(event) {
    // ...
  },
];

let actionIndex = 0;
test.onclick = function viewSomething(event) {
  actions[actionIndex](event);
  actionIndex = (actionIndex + 1) % actions.length;
};

该解决方案的优点是，您可以将操作“控制”与操作本身分离，并且可以更轻松地添加和重新安排其他操作。
if。。否则。。else
你基本上已经拥有了你所需要的一切，你只需要利用它：
如果（action==1）{…action=2；}如果（action==2）{…action=3；}如果（action==3）{…}
等等。@FelixKling这确实奏效了。我整晚都在做这个项目，我没有看到答案就在眼前。谢谢，非常抱歉，我真的厌倦了期末考试。。。哈哈哈。我的意思是，我如何添加第三个else if语句，在第三次单击时就会触发@Rojo@cresenmoon这是给你的，你也是。