如何实现按钮多次点击切换段落，末次同时修改段落与按钮文本

你当前的初始代码仅实现了前2段内容的二元切换，缺少多段扩展能力、末段按钮文本变更逻辑，可按如下方式调整：

核心实现逻辑 #

• 将所有需要依次展示的段落文本统一存入数组，后续新增/删除段落只需要修改数组内容，无需调整判断逻辑
• 用索引变量记录当前展示的段落位置，每次按钮点击触发索引后移
• 每次渲染对应段落内容后，判断当前是否为最后一段：如果是则同步修改按钮显示文本为Hint
• 到达最后一段后停止索引自增，避免出现空内容

完整实现代码 #

JavaScript 部分 #

// 按展示顺序配置所有段落内容，可自行扩展
const paragraphs = [
  "First Paragraph",
  "Second Paragraph",
  "Third Paragraph",
  "Forth Paragraph"
];
let currentIndex = 0;

function changeText() {
  const contentEl = document.getElementById('name');
  const btnEl = document.getElementById('switchBtn');
  
  // 渲染当前段落
  contentEl.innerHTML = paragraphs[currentIndex];
  
  // 到达最后一段时修改按钮文本
  if (currentIndex === paragraphs.length - 1) {
    btnEl.value = "Hint";
    return;
  }

  // 未到最后一段时索引后移，供下次点击使用
  currentIndex++;
}

HTML 部分 #

<body>
    <p>
        <b id='name'>{description}</b>.
    </p>
    <!-- 给按钮新增id，方便JS获取元素修改文本 -->
    <input id="switchBtn" type="button" onclick="changeText()" value="click" />
    <br><br>
</body>

可选扩展 #

如果需要切换到最后一段后回到第一段循环播放，只需要把函数内索引相关逻辑替换为如下代码即可：

// 循环切换索引
currentIndex = (currentIndex + 1) % paragraphs.length;
// 循环模式下同步切换按钮文本
btnEl.value = currentIndex === paragraphs.length - 1 ? "Hint" : "click";

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