單擊按鈕時執行不同的功能

Question

我正在使用Javascript開發一個網頁，我想實現一個按鈕，這樣每當你點擊它時，按鈕內的文字就會變成下一個文本。

目前我正在這樣做（也是一個演示來說明我的意思）：

CodePen.io

var textCount = 0;
function changeText() {
  var myText = document.getElementById("demo");
  switch (textCount) {
    case 0:{
      myText.innerHTML = "This is the second text";
      textCount++;
    }
    break;
    case 1: {
      myText.innerHTML = "This is the third text";
      textCount++;
    }
    break;
    case 2: {
      myText.innerHTML = "It keeps going on like this";
      textCount++;
    }
    break;
  }
}

基本上我使用switch語句和計數器一步一步走。

我能想到的另一種方法是使用一個包含所有文本的數組 ，我的函數只需要通過它（看起來效率更高）

---

• 但我仍然想知道是否有任何其他方法（雖然顯而易見）你可以用純Javascript實現這一點。

提前致謝。

Answer 1

您是對的，您可以通過使用數組使其更清潔，更高效，例如：

let list = ['Message one', 'Message two', 'Message three', 'Message four'];

let counter = 0;

function clickHandler () {
    element.textContent = list[counter];
    counter = (counter + 1) % list.length; // If you want to loop messages, otherwise ++
}