点击按钮实现打字机效果切换文本的问题排查

核心问题 #

1. 重复ID错误：HTML中所有按钮使用了同一个id="buttonsId"，ID在DOM中必须唯一，导致querySelectorAll无法正确选中所有按钮。
2. 常量赋值错误：尝试对const声明的数组a执行a++操作，const声明的变量不可重新赋值，直接抛出"Assignment to constant variable"错误。
3. 函数参数未处理：typeText函数没有接收参数，且内部硬编码使用a[0]，导致无论点击哪个按钮都只会显示数组首个元素。
4. 未清理旧定时器：重复点击按钮时，旧的打字机定时器未被清除，会出现多个打字效果叠加的问题。
5. 文本索引逻辑错误：原代码中a[0][line][count]的写法错误，a是一维数组，直接取对应索引的文本即可。

修复步骤 #

• 修正HTML按钮ID：移除重复的id="buttonsId"，保留data-action属性用于区分按钮对应的文本索引。
• 修改按钮点击事件：从按钮的data-action属性获取目标文本索引，将其传入typeText函数。
• 重构typeText函数：添加参数接收目标索引，内部使用该索引获取对应文本；每次执行前清空显示区域、重置计数器，并清除旧定时器。
• 修复打字机逻辑：调整文本拼接的索引逻辑，确保正确遍历目标文本的每个字符。

完整修复代码 #

HTML部分 #

<div class="header_text">
  <div class="content">
    <div class="header_text__block">
      <h1>Сервис <br> продажи билетов</h1>
      <p class="typewriter"></p>
    </div>
    <div class="header__button">
      <button class="buttons" data-action="0"><a href="#">Конференция</a></button>
      <button class="buttons" data-action="1"><a href="#">Выставка</a></button>
      <button class="buttons" data-action="2"><a href="#">Шоу</a></button>
      <button class="buttons" data-action="3"><a href="#">Онлайн</a></button>
      <button class="buttons" data-action="4"><a href="#">Театр</a></button>
    </div>
  </div>
</div>

JavaScript部分 #

const textList = [
  "На концерты",
  "На мероприятия",
  "На фестиваль",
  "На шоу",
  "На онлайн-событие"
];
const typewriter = document.querySelector('.typewriter');
let typeTimer = null; // 保存定时器ID，用于清理

function typeText(targetIndex) {
  // 清除旧定时器，避免叠加
  if (typeTimer) {
    clearInterval(typeTimer);
  }
  let count = 0; // 字符位置计数器
  let out = ''; // 拼接的文本
  const targetText = textList[targetIndex]; // 获取目标文本

  // 清空显示区域
  typewriter.innerHTML = '';

  typeTimer = setInterval(() => {
    out += targetText[count];
    typewriter.innerHTML = out;
    count++;
    // 字符遍历完成后清除定时器
    if (count >= targetText.length) {
      clearInterval(typeTimer);
      typeTimer = null;
    }
  }, 70);
}

// 初始显示第一个文本
typeText(0);

// 绑定按钮点击事件
const buttons = document.querySelectorAll('.buttons');
buttons.forEach(button => {
  button.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止a标签默认跳转（可选，根据需求调整）
    const index = parseInt(button.dataset.action);
    typeText(index);
  });
});

说明 #

• 将原数组a重命名为textList，语义更清晰。
• 新增typeTimer变量存储定时器ID，每次调用typeText时先清除旧定时器，避免多个打字效果同时运行。
• 点击按钮时通过dataset.action获取对应文本索引，传入typeText函数，实现不同按钮显示对应文本。
• 简化打字机逻辑，直接遍历目标文本的每个字符，符合单文本打字的需求。

内容的提问来源于stack exchange，提问作者al.orl