点击图标切换激活类报错：Cannot read properties of undefined (reading 'className')

错误原因 #

• 核心问题：当页面里没有元素带.active-btn类时，document.querySelectorAll('.active-btn')返回空数组，currentBtn[0]就是undefined，访问它的className自然会报错。
• 另外还有两个潜在问题：
  • sectBtn变量没在代码里定义，如果这个变量没拿到DOM元素，循环直接跳过，事件绑定根本不会生效。
  • 直接操作className不严谨：重复点击会导致类名重复（比如xxxactive-btnactive-btn），替换时还可能误改其他类名。

修复后的代码 #

function PageTransitions(){
    // 先确保获取到目标按钮，根据你的HTML调整选择器
    const sectBtn = document.querySelectorAll('.your-btn-class');
    
    for (let i = 0; i < sectBtn.length; i++){
        sectBtn[i].addEventListener('click', function(){
            // 只取第一个激活的按钮，用querySelector更高效
            let currentBtn = document.querySelector('.active-btn');
            // 先判断元素存在再操作
            if (currentBtn) {
                currentBtn.classList.remove('active-btn');
            }
            // 用classList添加类，自动处理重复问题
            this.classList.add('active-btn');
        }) 
    }
}

优化说明 #

• 用querySelector代替querySelectorAll：激活类本来就该只有一个，直接取第一个匹配元素更高效，还避免了数组索引的坑。
• 加存在性判断：操作DOM元素前先检查currentBtn是否存在，彻底解决undefined报错的问题。
• 改用classListAPI：add()和remove()是标准的类名操作方法，自动处理空格、重复类名的问题，比拼className靠谱多了。
• 补全sectBtn定义：必须先正确获取到按钮元素，把.your-btn-class换成你实际的按钮选择器。

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