Javascript 未捕获类型错误：无法读取属性'；增补列表器'；空值（查询选择器）_Javascript_Event Listener

Javascript 未捕获类型错误：无法读取属性'；增补列表器'；空值（查询选择器）

javascript

Javascript 未捕获类型错误：无法读取属性'；增补列表器'；空值（查询选择器）,javascript,event-listener,Javascript,Event Listener,我得到以下错误：未捕获的TypeError:无法读取null的属性“addEventListener” addEventListener在单个id（菜单）上运行良好。。。有没有限制我不能在querySelector上使用它（是的，JavaScript位于HTML文档的底部）任何帮助都将不胜感激尝试更改： var area = document.querySelector("#menu + #envelope + #links"); 用于：由于您的html是： <div id=

我得到以下错误：

未捕获的TypeError:无法读取null的属性“addEventListener”

addEventListener

在单个id（菜单）上运行良好。。。有没有限制我不能在querySelector上使用它

（是的，JavaScript位于HTML文档的底部）

任何帮助都将不胜感激

尝试更改：

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>

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

尝试更改：

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>

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

在window.onload（）中包装Javascript

看起来浏览器在“执行HTML”/“生成页面”之前正在执行JavaScript，因此这些HTML元素/DOM节点还不存在。这会引入一个延迟，直到加载HTML，这样在JavaScript尝试将方法附加到节点之前，节点就已经存在（不是null）。（还有下面jprubio对选择器的介绍。）

在window.onload（）中包装Javascript

看起来浏览器在“执行HTML”/“生成页面”之前正在执行JavaScript，因此这些HTML元素/DOM节点还不存在。这会引入一个延迟，直到加载HTML，这样在JavaScript尝试将方法附加到节点之前，节点就已经存在（不是null）。（还有下面jprubio对您的选择器所说的。）

我已经编辑了您的plunk，以适应您犯的两个小错误

第一个错误是将脚本包含在标记中。我在结束语前加了一个

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

这是经过编辑的plunk

代码

//代码在这里

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

我编辑了你的日志，以适应你犯的两个小错误