JavaScript实现板块切换报读取className的TypeError错误

控制台抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'className') at HTMLDivElement.
我是JavaScript初学者，目前正在尝试实现页面板块切换功能，开发过程中遇到上述TypeError报错，不知道如何排查解决。

JavaScript 代码 #

const sections = document.querySelectorAll('.section');
const sectBtns  = document.querySelectorAll('.controls');  
const sectBtn = document.querySelectorAll('.control');     
const allSections = document.querySelector('.main-content');  


function PageTransition() {
    //Button click active class
    for(let i = 0; i < sectBtn.length; i++) {
        sectBtn[i].addEventListener('click', function(){
            let currentBtn = document.querySelectorAll('.active-btn');
           
            currentBtn[0].className = 
            currentBtn[0].className.replace('active-btn', '');

            this.className += 'active-btn';
        })
    }
}

HTML 代码 #

<body class="main-content">
    <header class="section sec1 header active">

    </header>    

    <main>
        <section class="section sec2 about"></section>
        <section class="section sec3 portfolio"></section>
        <section class="section sec4 skills"></section>
        <section class="section sec5 contact"></section>
    </main>
    
    <div class="contorls">
        <div class="control control-1 active-btn">
            <i class="fas fa-home"></i>
        </div>
        <div class="control control-2" data-id="about">
            <i class="fas fa-user"></i>
        </div>
        <div class="control control-3" data-id="portfolio">
            <i class="fas fa-briefcase"></i>
        </div>
        <div class="control control-4" data-id="skills">
            <i class="fas fa-newspaper"></i>
        </div>
        <div class="control control-5" data-id="contact">
            <i class="fas fa-envelope-open"></i>
        </div>
           
    </div>

<script src="app.js"></script>
</body>

• 核心触发原因：拼接类名时没有加前置空格，this.className += 'active-btn'会把新类名和原有类名连在一起，比如原有类是control control-2，拼接后变成control control-2active-btn，浏览器无法识别到独立的active-btn类。第一次点击移除初始的active-btn类后，后续点击时document.querySelectorAll('.active-btn')会拿到空列表，访问currentBtn[0]得到undefined，再读取className属性就会抛出类型错误。
• 代码逻辑遗漏：定义了PageTransition函数但没有调用，事件监听不会生效。
• 拼写错误：HTML中控件容器的类名写为contorls，和JS里选择器匹配的controls拼写不一致。

• 修正HTML类名拼写错误，将<div class="contorls">改为<div class="controls">
• 拼接类名时补充前置空格，避免类名粘连
• 访问currentBtn[0]前先判断列表是否为空，规避空值报错
• 调用PageTransition()函数，让事件监听生效

修复后的JS代码参考：

const sections = document.querySelectorAll('.section');
const sectBtns  = document.querySelectorAll('.controls');  
const sectBtn = document.querySelectorAll('.control');     
const allSections = document.querySelector('.main-content');  


function PageTransition() {
    // 按钮点击切换激活状态
    for(let i = 0; i < sectBtn.length; i++) {
        sectBtn[i].addEventListener('click', function(){
            let currentBtn = document.querySelectorAll('.active-btn');
            // 先判断是否存在已激活按钮，避免空值报错
            if(currentBtn.length > 0) {
                currentBtn[0].className = currentBtn[0].className.replace('active-btn', '').trim();
            }
            // 类名前加空格，防止和原有类名粘连
            this.className += ' active-btn';
        })
    }
}
// 调用函数启用交互
PageTransition();

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