Question

我之前从未使用过JavaScript或CSS。我使用了Actionscript，发现它与JavaScript类似。

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

我想自己动手制作动画，而不是动画制作，为我练习动画。

我做的一切都是正确的，除了动画不会保持最终的不透明度，它会重置为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个网站出错了。

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

Answer 1

如果仍然无法正常工作，那是因为在giveopac事件中你试图访问它并向它添加样式，这是不对的。这是窗口对象您可以考虑更改此设置请检查以下代码段

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会有所帮助;

Answer 2

找到了答案！

我把它放在全身之后并改为：

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

感谢geeky

Answer 3

在关闭html页面中的body标签之前，请确保具有脚本标签。

<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>

无法读取null的属性'addEventListener' - JavaScript

3 个答案: