javascript - 单击按钮时执行不同的功能

我正在使用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实现。


提前致谢。

最佳答案

没错，可以使用数组使它更干净和更高效，例如：

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