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

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语句和一个计数器一步一步来的。

我能想到的另一种方法是使用一个 array 来保存所有文本，我的函数只是通过它（似乎更有效）

---

• 但我仍然想知道是否有任何其他方法（尽管很明显）可以使用纯 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 ++
}