HTML/JS新手求助：如何实现视觉小说点击逐段推进文本功能？

问题出在哪？ #

你现在的代码给html元素绑了两个独立的mousedown事件处理函数，每次点击页面时，这两个函数会同时执行，所以一次点击就把两段文本都插进去了，自然不符合逐段显示的预期。

怎么改？用状态跟踪实现逐段推进 #

不需要用await/promise（除非你要做逐字弹出的打字机效果，那另说），只需要一个事件处理函数，加个变量跟踪当前显示到哪一段就行，核心逻辑：

• 把所有要显示的文本存成一个数组
• 用一个索引变量记录当前该显示第几个文本
• 每次点击只插入当前索引对应的文本，然后索引自增，直到所有文本显示完毕

基础实现代码 #

<div id="content"></div>
<button id="resetScene" style="display: none;">重置/切换场景</button>

// 1. 定义当前场景的文本序列
const currentStory = [
  "Z. 这是第一段剧情文本",
  "A. 这是第二段剧情文本",
  "B. 这是第三段剧情文本",
  "C. 当前场景结束"
];

// 2. 状态变量：跟踪当前显示到第几个文本
let currentTextIndex = 0;
// 获取页面元素
const contentBox = document.getElementById('content');
const resetBtn = document.getElementById('resetScene');

// 3. 唯一的点击事件处理函数
function advanceStory() {
  // 已经显示完所有文本，直接退出
  if (currentTextIndex >= currentStory.length) {
    resetBtn.style.display = 'inline-block';
    return;
  }

  // 创建文本元素，插入到容器里
  const textNode = document.createElement('span');
  // 加换行让每段文本分开显示
  textNode.textContent = currentStory[currentTextIndex] + '\n';
  contentBox.appendChild(textNode);

  // 索引自增，准备下一次点击
  currentTextIndex++;
}

// 给整个页面绑定点击事件
document.querySelector('html').addEventListener('mousedown', advanceStory);

// 4. 场景重置/切换功能
resetBtn.addEventListener('click', function() {
  // 清空当前显示的所有文本
  contentBox.innerHTML = '';
  // 重置索引，回到场景开头
  currentTextIndex = 0;
  // 隐藏重置按钮
  this.style.display = 'none';

  // 如果要切换到新场景，替换currentStory数组即可
  // currentStory = ["新场景第一段", "新场景第二段", "新场景结束"];
});

额外：逐字打字机效果（用到Promise） #

如果想要传统视觉小说那种逐字弹出的效果，就需要用到Promise和await，修改后的核心代码如下：

// 逐字显示文本的工具函数
async function typeWriter(element, text) {
  element.textContent = '';
  for (const char of text) {
    element.textContent += char;
    // 控制每个字符的显示速度，这里是50毫秒
    await new Promise(resolve => setTimeout(resolve, 50));
  }
}

// 修改点击处理函数为异步函数
async function advanceStory() {
  if (currentTextIndex >= currentStory.length) {
    resetBtn.style.display = 'inline-block';
    return;
  }

  const textNode = document.createElement('span');
  contentBox.appendChild(textNode);
  // 调用逐字显示函数
  await typeWriter(textNode, currentStory[currentTextIndex] + '\n');
  
  currentTextIndex++;
}

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