Question

我遇到以下错误：

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

addEventListener在单个ID（菜单）上可以很好地工作...是否存在不能在querySelector上使用的限制？

（是的，JavaScript在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;
}

Answer 1

尝试更改：

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

针对：

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>

element+element selector（相邻兄弟选择器）用于选择放置在第一个指定元素之后（不在内）的元素。您需要后代选择器或子选择器。

看看w3cschools CSS Combinators。

或者，在这种情况下，正如epascarello所说，您可以使用：

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

因为如果文档验证，则ID必须是唯一的。

Answer 2

我已对您的小品进行了修改，以适应您犯的两个小错误。

第一个错误是将脚本包含在标记中。我已经在结束标记之前插入了

此外，正如@jeprubio所述，您需要从querySelector（）调用中删除“ +”。

这是编辑过的小人物

https://plnkr.co/edit/sB7r0MguCN3KvhdHvB4i

代码

//代码在这里

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");
}

Answer 3

您的代码很好，您只需要：

将脚本放在关闭标签</body>之前。
从"#menu + #envelope + #links"到"#menu #envelope #links"的querySelector元素区域正确

示例：

// Code goes here


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");
}

/* Styles go here */

#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;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="menu">Click here to browse the internet.1
        <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>
    <script src="script.js"></script>
</body>
</html>

Answer 4

将Javascript包装在window.onload（）

中

window.onload=function() {
   /*your code here*
   /*var date = document.getElementById("date");
   /*alert(date);
}

在“执行HTML” /创建页面之前，浏览器似乎正在执行JavaScript，因此这些HTML元素/ DOM节点尚不存在。这会导致在加载HTML之前有一个延迟，以便在JavaScript尝试将方法附加到节点之前，节点存在（不为null）。（下面是jprubio关于您的选择器的内容。）

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

4 个答案: