无法读取 null 的属性“addEventListener” - JavaScript答案

【问题标题】：Cannot read property 'addEventListener' of null - JavaScript无法读取 null 的属性“addEventListener” - JavaScript
【发布时间】：2016-10-15 04:53:04
【问题描述】：

我以前从未使用过 JavaScript 或 CSS。我使用过 Actionscript，发现它类似于 JavaScript。

我正在制作一个小 html 页面，其中有一个来自 animation.css 的 fadeInUp 动画

我想自己做动画，而不是 animation.css 为我做，为了练习。

我做的一切都是正确的，除了动画不停留在最后的不透明度，它重置为 css 编码的不透明度。

我决定做一些javascripting并制作了这段代码

（两个动画元素所在的div称为“toppart”）

var beginpart = document.getElementById("toppart");
beginpart.addEventListener("animationend", giveopac, false);
function giveopac()
{
this.style.opacity=1
}

我不知道它有什么问题（可能是语法有问题），但我得到了这个控制台错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null
(anonymous function)

是函数的问题还是变量的问题？如果事件监听器出现问题，则大约有 10 个网站出现问题。

如果有人知道我做错了什么，以及为什么它给了我错误，我很想知道。

【问题讨论】：

你能不能也提供标记...只需检查是否有任何元素toppart
这行导致你的问题var beginpart = document.getElementById("toppart");可能是id为toppart的元素在dom上不存在
必须确保div 的id 属性为"toppart"
可能是您需要在页面加载时触发此代码，可能是您将此代码放在 dom 中的元素之前；
@Geeky

赞恩·克拉克

"Keter"

这是全身，我不知道什么是标记............

标签： javascript html css animation

【解决方案1】：

如果它仍然无法正常工作，那是因为在 giveopac 事件中，您试图访问它并向其添加样式，这是不正确的。这是窗口对象你可以考虑改变这个检查以下代码sn -p

var beginpart = document.getElementById("toppart");
 // alert(beginpart);
beginpart.addEventListener("animationend", giveopac, false);
function giveopac(event)
{

event.target.style.opacity=1;
event.target.style.background="red";
}

<body> 
  <div id="toppart"> 
  <p id="first" class="moveupfade">Zane Clark</p> 
  <p id="subfirst" class="moveupfade">"Keter"</p> 
  </div> 
</body>

希望这会有所帮助；

【讨论】：

我可以用任何东西替换事件吗（我不使用 JavaScript，抱歉我不知道）？如果没有，它没有，它可能不起作用:(
是的，它不反对，因为事件是始终传递的对象，并且将在处理程序上可用..有关更多信息，您可以在此处阅读javascript.info/tutorial/obtaining-event-object

【解决方案2】：

找到答案了！

我把它放在全身之后，改成这样：

<script>
document.getElementById("toppart").addEventListener("animationend", giveopac);
function giveopac(event)
{
event.target.style.opacity=1;
}
</script>

感谢极客

【讨论】：

【解决方案3】：

请确保在 html 页面中的正文结束标记之前有脚本标记。

<html>
<body>
<div id="toppart"> <p id="first" class="moveupfade">Zane Clark</p> <p id="subfirst" 
class="moveupfade">"Keter"</p> </div> 
<script src="myScript.js"></script>
</body>
</html>

【讨论】：