Question

收到错误 Uncaught TypeError: Cannot read properties of undefined (reading 'className') className.replace property

2022-07-20

1843

javascript html google-chrome-extension

我尝试创建一个网站并编写一个函数。使用此函数单击图标将更改活动图标类。但我收到 无法读取未定义的属性（读取“className”） 错误。我已在下面分享了该函数。您认为问题是什么？这是我的函数；

function PageTransitions(){
    // Button click activa 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'
        }) 
    }
}

您认为问题是什么？

Answer 1

您没有选择任何按钮，因此找不到按钮，并会引发错误。因此，请确保在使用该元素之前该元素存在。并使用 classList

const currentBtn = document.querySelector('.active-btn');
if (currentBtn) currentBtn.classList.remove('active-btn');
this.classList.add('active-btn');

Answer 2

可能 document.querySelectorAll('.active-btn'); 返回空数组，因为您的 currentBtn 为空，并且 currentBtn[0] 为 undefined 。这会导致 currentBtn[0].className 失败