Question

未捕获的类型错误：无法读取 HTMLDivElement 中未定义的属性（读取‘className’）。<anonymous>

2022-07-07

4742

javascript function typeerror this

点击此处查看图片我是 javascript 新手。我尝试在各个部分之间切换，但出现了 TypeError。不知道该怎么办。

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 代码。我有一个类名为 active-btn 的元素。

<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>

Answer 1

currentBtn[0].className = 
        currentBtn[0].className.replace('active-btn', '');

        this.className += 'active-btn';

我遇到了同样的问题。在这里，当您更改类名时。不应使用 this.className += "active-btn" ，而应使用 this.className += " active-btn" ，并在类名“active-btn”开头加一个空格。如果不使用空格，则类名将与其他类名连接在一起。

Answer 2

第一次尝试获取活动按钮时，没有任何具有该类的元素，因此 document.querySelectorAll 仅返回一个空数组。

然后，当您尝试访问第一个元素时，将返回 undefined 。

导致错误的原因是尝试访问该 undefined 上的 className 。

您可以使用可选链接来修复该问题，因此它仅在存在元素时才访问该属性。

for(let i = 0; i < sectBtn.length; i++) {
    sectBtn[i].addEventListener('click', function(){
        //                       (1)
        let currentBtn = document.querySelector('.active-btn');

        //        (2)    (3)  (4)
        currentBtn?.classList.remove('active-btn');

        this.classList.add('active-btn')
    })
}

我将其更改为 querySelector 而不是 querySelectorAll ，因为您只在寻找第一个结果。
这是可选链。如果 currentBtn 为 null 或 undefined ，则不会发生任何事情（无错误）。

如果不是 null 或 undefined ，则将删除 active-btn 类。
这更改为 classList 而不是 className ，因为 classList 具有更好的 API。
这是使用 classList 删除类的方法。如果您想了解更多信息，请访问 MDN 链接。

希望对您有所帮助！:)