Fatal编程技术网

Javascript错误-AddEventListener

javascript

Javascript错误-AddEventListener,javascript,event-listener,Javascript,Event Listener,我正在youtube上观看Traversy Media web教程，在教程中，他从头开始创建了一个模式，在17.00分钟时，我收到一个错误- "Uncaught TypeError: Cannot read property 'addEventListener' of null" 代码片段 //获取模态元素 var modal=document.getElementById（'simpleModel'）； //获取打开模式按钮 var modalBtn=document.getElement

我正在youtube上观看Traversy Media web教程，在教程中，他从头开始创建了一个模式，在
17.00分钟时，我收到一个错误-


"Uncaught TypeError: Cannot read property 'addEventListener' of null"


代码片段



//获取模态元素
var modal=document.getElementById（'simpleModel'）；
//获取打开模式按钮
var modalBtn=document.getElementById（'modalBtn'）；
//接近按钮
var closeBtn=document.getElementById（'closeBtn'）；
//听一听咔嗒声
modalBtn.addEventListener（'click'，openmodel）；
//打开模式的功能
函数openModal（）{
控制台日志（123）；
}



点击这里
&时代；
你好…我是一名模特


这是因为在HTML页面中没有id为
modalBtn
的按钮（或任何元素），因为添加了
#id
来代替
id
。因此，在
单击此处
中更改
#id
将修复您的错误。如果Javascript没有找到要在其中添加事件侦听器的元素，它将抛出一个错误。属性中的
#id
并不意味着
id
属性



//获取模态元素
var modal=document.getElementById（'simpleModel'）；
//获取打开模式按钮
var modalBtn=document.getElementById（'modalBtn'）；
//接近按钮
var closeBtn=document.getElementById（'closeBtn'）；
//听一听咔嗒声
modalBtn.addEventListener（'click'，openmodel）；
//打开模式的功能
函数openModal（）{
控制台日志（123）；
}


点击这里
&时代；
你好…我是一名模特


单击此处


删除上一行中的字符#，然后重试

编辑：
应该是这样的


<button id="modalBtn" class="button">Click Here</button>



点击这里

我不认为这个问题是重复的，因为OP没有在HTML中正确添加id属性，因此出现了错误。谢谢，这解决了我的问题：）不客气：）编码愉快

<button id="modalBtn" class="button">Click Here</button>