浏览器控制台错误：未捕获类型错误：allSections.addEventListener 不是函数答案

【问题标题】：Browser console Error: Uncaught TypeError: allSections.addEventListener is not a function浏览器控制台错误：未捕获类型错误：allSections.addEventListener 不是函数
【发布时间】：2022-08-16 01:21:23
【问题描述】：

当我检查它时，我在浏览器控制台中不断收到此错误：Uncaught TypeError: allSections.addEventListener is not a function 在 PageTransitions (app.js:16:17) 在 app.js:33:1

这很奇怪，因为在我的 vs 代码编辑器中它没有显示任何错误。这是我在下面使用的代码。

const sections = document.querySelectorAll(\'.section\');
const secBtns = document.querySelectorAll(\'.controls\');
const secBtn = document.querySelectorAll(\'.control\');
const allSections = document.querySelectorAll(\'.main-content\');

function PageTransitions(){
    
    for(let i = 0; i < secBtn.length; i++){
        secBtn[i].addEventListener(\'click\', function(){
            let currentBtn = document.querySelectorAll(\'.active-btn\');
            currentBtn[0].className = currentBtn[0].className.replace(\'active-btn\', \'\')
            this.className += \' active-btn\';
        })
    }

    allSections.addEventListener(\'click\', (e) =>{
        const id = e.target.dataset.id;
        if(id) {
            secBtns.forEach((btn) => {
                btn.classList.remove(\'active\')
            })
            e.target.classList.add(\'active\')
            sections.forEach((section)=>{
                section.classList.remove(\'active\')
            })

            const element = document.getElementById(id);
            element.classList.add(\'active\');
        }
    })
}

PageTransitions();

这里也是下面的html。

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Portfolio</title>
    <link rel=\"stylesheet\" href=\"styles/styles.css\">
    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css\" integrity=\"sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />
<link href=\"https://fonts.googleapis.com/css2?family=Poppins:ital@1&family=Ubuntu:wght@300&display=swap\" rel=\"stylesheet\">
</head>
<body class=\"main-content\">
    <header class=\"section sec1 header active\" id=\"home\">
        
    </header>
    
    <main>
        <section class=\"section sec2 about\" id=\"about\"></section>
        <section class=\"section sec3 portfolio\" id=\"portfolio\"></section>
        <section class=\"section sec4 blogs\" id=\"blogs\"></section>
        <section class=\"section sec5 contacts\" id=\"contact\"></section>
    </main>

    <div class=\"controls\">
        <div class=\"control control-1 active-btn\" data-id=\"home\">
            <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=\"blogs\">
            <i class=\"far 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>
</html>

这回答了你的问题了吗？ addEventListener on a querySelectorAll() with classList

标签： javascript html console

【解决方案1】：

这是因为allSections 包含一个NodeList，因为querySelectorAll 方法返回一个静态（非实时）NodeList，表示与指定选择器组匹配的文档元素列表。，而不仅仅是一个要听的元素：

const allSections = document.querySelectorAll('.main-content');

因此，要解决这个问题，您需要使用forEach 遍历所有部分，并为部分收听点击：

allSections.forEach((section) =>
    section.addEventListener("click", (e) => {
    const id = e.target.dataset.id;
    if (id) {
        secBtns.forEach((btn) => {
        btn.classList.remove("active");
        });
        e.target.classList.add("active");
        sections.forEach((section) => {
        section.classList.remove("active");
        });

        const element = document.getElementById(id);
        element.classList.add("active");
    }
    })
);

【讨论】：

我刚刚修复了添加了一个参考 MDN，以了解更多信息！
我像你一样把代码放进去，但我不断收到错误消息“预期 ts(1005) 最后一行

【解决方案2】：

const sections = document.querySelectorAll('.section');
const secBtns = document.querySelectorAll('.controls');
const secBtn = document.querySelectorAll('.control');
const allSections = document.querySelectorAll('.main-content');

我遇到了同样的问题。这里的问题是，当您在 allSections 变量上使用 querySelectorAll 时，会出现错误。 addEventListener 只能应用于单个元素，querySelectorAll 给出一个列表。要解决此问题，请使用 querySelector 而不是 querySelectorAll

希望这可以帮助！

【讨论】：