JS按钮onclick事件每次点击切换函数输出内容失效问题

当前onclick属性里用逗号分隔写三个函数，代表单次点击会从上到下同步执行全部三个函数。三个函数的逻辑都是直接覆盖id="demo"段落的文本，前两个函数写入的内容会被立刻执行的后一个函数覆盖，最终页面只会保留最后执行的myFunction3()输出的Hello ok。代码里完全没有记录点击状态、按点击次数切换执行逻辑的部分，自然多次点击也不会有内容变化。

只需要给按钮绑定一个统一的点击处理函数，用变量记录点击次数，每次点击根据次数匹配对应要展示的内容，次数到上限后自动重置循环即可。
完整可运行代码如下：

<!DOCTYPE html>
<html>
<body>

<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output different content in order:</p>

<!-- 只绑定一个统一的处理函数 -->
<button onclick="switchContent()">Click me</button>

<p id="demo"></p>

<script>
// 记录当前点击的序号，初始为0
let clickIndex = 0;
// 按切换顺序存储所有要展示的文本
const contentArr = [
  "Hello World",
  "Hello lllo",
  "Hello ok"
];

function switchContent() {
  // 把对应序号的内容写入页面
  document.getElementById("demo").textContent = contentArr[clickIndex];
  // 序号自增，到数组长度后取模重置为0，实现循环切换
  clickIndex = (clickIndex + 1) % contentArr.length;
}

/* 如果你需要保留三个独立的业务函数，也可以用下面的写法
let clickIndex = 0;
function switchContent() {
  if(clickIndex === 0) {
    myFunction();
  } else if(clickIndex === 1) {
    myFunction2();
  } else {
    myFunction3();
  }
  clickIndex = (clickIndex + 1) % 3;
}
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
function myFunction2() {
  document.getElementById("demo").innerHTML = "Hello lllo";
}
function myFunction3() {
  document.getElementById("demo").innerHTML = "Hello ok";
}
*/
</script>

</body>
</html>

实现说明 #

• 单次点击只会执行一次内容写入，不会出现连续覆盖导致只有最后一个内容生效的问题
• 用取模运算实现循环逻辑，不需要写多层判断，代码更简洁
• 后续需要新增切换内容时，直接往contentArr数组里添加新文本即可，不需要改动核心切换逻辑
• 纯文本内容推荐用textContent代替innerHTML，安全性更高

内容的提问来源于stack exchange，提问作者Megantara