Looping eventListener?

Question

大家好，我是JS和编程的新手。刚开始学习，出于好奇，我想知道是否有一种方法可以循环浏览click eventListener。所以每次我点击带有标题id的h1标题时，innerHTML都会发生变化，就像一次无限的洗牌？

const element = document.getElementById("title");

element.addEventListener("click", function(){
element.innerHTML = "Cool Right?";
element.addEventListener("click", function(){
element.innerHTML = "SoundPad";
});
});

Answer 1

1. 使用要循环的字符串创建一个数组(strings(

2. 创建一个整数，我们将在其中保存当前显示的索引(i(

3. 添加click侦听器，我们将在其中：

   1. 检查当前索引是否为最后一个值，如果是，则循环到0
   2. 将element.innerHTML设置为数组的索引
   3. 凹凸索引

const element = document.getElementById("title");
const strings = [ 'Hello', 'How', 'Are', 'You', '?' ];
let i = 0;
element.addEventListener("click", () => {
if (i === strings.length) i = 0;
element.innerHTML = strings[i];
i++;
});

<h1 id='title'>Starting Title</h1>

---

我们可以通过多种方式简化这三条线：

1. 想象使用与上述相同的逻辑的一个线性

   element.addEventListener("click", () => element.innerHTML = strings[(i === (strings.length - 1)) ? (i = 0) : ++i]);
   

2. 使用模运算符(%(设置i

   element.addEventListener("click", () => {
   i = (i + 1) % strings.length
   element.innerHTML = strings[i];
   });