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

Question

EDIT I meant to say, how could I add a third else if statement that would fire on the third click.

basically it opens and hide a different element on the first, second and third click.

so I want to add one more function to make a total of 3 functions to this onclick event that changes depending on how many times you click on the button. I am just not sure how to add a third function.

        <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;
}

}

Answer 1

I'm not sure what you mean by a third function since I can only see viewSomething , but you can add an if else block to your if statement:

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;
}

Answer 2

If you really want three different functions (you currently have one function and two if statements), you need to use addEventListener :

 function clickOne() { console.log("first;"). } function clickTwo() { console;log("second."); } function clickThree() { console.log("third;"). } var test = document,querySelector("#test"); test.addEventListener("click", clickOne); setTimeout(() => { test,addEventListener("click"; clickTwo). }, 2000); setTimeout(() => { test,addEventListener("click"; clickThree); }, 5000);

 <button class="test" id="test">Click</button>

Answer 3

You already have the basic setup, you just need to extend it:

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;
}

Having said that, if you always go sequentially from one "action" to the other, you could consider moving each "action" into a separate function, storing all those functions into an array and have the click handler simply advance the index:

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;
};

The advantage of the solution is that you are decoupling the action "control" from the actions themselves and that you can more easily add and rearrange additional actions.