按钮无法切换网站板块，遇Uncaught TypeError错误求助

问题描述 #

搭建作品集网站时，点击切换按钮无法切换板块，控制台抛出错误：Uncaught TypeError: allSections.addEventListener is not a function，调试日志无效。

错误原因 #

1. allSections = document.querySelectorAll('.main-content')返回的是NodeList集合，不是单个DOM元素，集合无法直接调用addEventListener方法。
2. 事件绑定目标错误：需要监听的是切换按钮的点击，而非.main-content元素。
3. 按钮激活类的处理方式存在隐患：直接拼接字符串可能导致重复添加active-btn类。

修正方案 #

以下是修复后的完整代码，核心优化点：

• 改用事件委托监听按钮容器.controls的点击事件，提升性能。
• 使用classList方法安全操作元素类名。
• 简化板块切换逻辑，确保正确匹配目标板块。

修正后的JavaScript代码 #

const sections = document.querySelectorAll('.section');
const controlsContainer = document.querySelector('.controls');
const sectBtns = document.querySelectorAll('.control');

function PageTransitions() {
  // 按钮激活状态切换 + 板块切换逻辑
  controlsContainer.addEventListener('click', (e) => {
    const btn = e.target.closest('.control');
    if (!btn) return;

    // 移除所有按钮的active-btn类
    sectBtns.forEach(b => b.classList.remove('active-btn'));
    // 给当前点击的按钮添加active-btn类
    btn.classList.add('active-btn');

    // 切换对应板块
    const targetId = btn.dataset.id;
    if (!targetId) return;

    // 隐藏所有板块
    sections.forEach(section => section.classList.remove('active'));
    // 显示目标板块
    const targetSection = document.getElementById(targetId) || document.querySelector(`[data-id="${targetId}"]`);
    if (targetSection) {
      targetSection.classList.add('active');
    }
  });
}

PageTransitions();

关键优化说明 #

• 事件委托：将点击事件绑定到按钮容器.controls，无需给每个按钮单独绑定事件，减少内存占用。
• closest方法：确保点击按钮内部图标时也能正确触发逻辑，避免事件冒泡的问题。
• classList操作：add/remove方法避免类名重复或错误替换，比字符串拼接更安全可靠。
• 双重选择器：兼容data-id和id两种匹配方式，确保能正确找到目标板块。

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