Uncaught TypeError：无法读取null的属性'addEventListener'（querySelector）

Posted 2021-04-04

我似乎出现问题，因为出现以下错误：

未捕获的TypeError：无法读取null的属性'addEventListener'

addEventListener在单个id（菜单）上工作得很好。是否存在不能在querySelector上使用的限制？

（是，Java脚本位于html文档的底部。]

欢迎任何帮助。谢谢

https://plnkr.co/edit/AIAOZk40ssoofpvrt9dm?p=preview

var menu = document.getElementById("menu");
var area = document.querySelector("#menu + #envelope + #links");

menu.addEventListener("mouseenter", addHref);
area.addEventListener("mouseleave", remHref);

menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
    if (this != area){
        remHref();
    }
});

function remHref (){
    document.getElementById("google").removeAttribute("href");
    document.getElementById("mysite").removeAttribute("href");
}

function addHref (){
    setTimeout(activate, 2500);
}

function activate (){
    document.getElementById("google").setAttribute("href", "https://www.google.com");
    document.getElementById("mysite").setAttribute("href", "https://www.mywebsite.com");
}

    <div id="menu">Click here to browse the internet.
        <div id="envelope">
            <div id="links" >
                <div><a ><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></a></div>
                <div style="width: 20%;"></div>
                <div><a ><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></a></div>
            </div>
        </div>
    </div>

#menu{
    height: 10vh;
    background-color: red;
    text-align: center;
    transition: all 1s ease-out;
    padding-top: 5vh;
}

#menu:hover{
    color: red;
}

#envelope{
    height: 0;
    display: block;
    visibility: hidden;
    background-color: blue;
    min-width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    content: "";
    opacity: 0;
    transition: all 1.3s ease-out;
}

#links{
    height: 0;
    visibility: hidden;
    display: flex;
    background-color: pink;
    justify-content: center;
    z-index: 2;
    min-width: 100%;
    opacity: 0;
    transition: all 1s ease-in;
}


#google{
    margin-top: -1vh;
    width: 150px;
}

#mysite{
    padding-left: 5%;
    margin-top: -1vh;
    width: 150px;
}

#menu:hover #envelope{
    height: 100px;
    opacity: 1;
    visibility: visible;
}

#menu:focus #envelope{
    height: 100px;
    opacity: 1;
    visibility: visible;
}

#menu:hover #links{
    opacity: 1;
    height: 300px;
    visibility: visible;
}

#menu:focus #links{
    opacity: 1;
    height: 300px;
    visibility: visible;
}

答案

尝试更改：

var area = document.querySelector("#menu + #envelope + #links");

for：
var area = document.querySelector("#menu #envelope #links");

因为您的html是：
<div id="menu">Click here to browse the internet.
   <div id="envelope">
      <div id="links" >
         ...
      </div>
   </div>
</div>

另一答案

当您说document.addEventListener...文档时尚未定义。尝试添加选择器区域，而不是将其添加到文件开头的文档中。