暂停按钮代码

Pause button code

本文关键字：代码 按钮 暂停      更新时间：2023-09-26

我一直收到这个错误"pause_button.js:6 Uncaught TypeError:无法读取null（匿名函数）@pause_button.js:6的属性'addEventListener'"。不确定出了什么问题，但下面是代码，如果有人能帮我解决这个问题，那就太棒了。

var vid = document.getElementById("bgvid"),
pauseButton = document.getElementById("vidpause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed 
 vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
    pauseButton.innerHTML = "Pause";
} else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
}
})

此错误：

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

发生在这里：

vid.addEventListener('ended', function() { /.../ });

这意味着vid就是null。因此，这条线没有找到匹配的元素：

var vid = document.getElementById("bgvid")

那么，解决办法就是有一个与之匹配的元素。（我应该假设它是<video>元素吗？）特别是，当代码执行时，该元素需要存在。因此，您可能没有元素，或者可能有一个元素，但它在代码之后。

对比一下：

<script type="text/javascript">
    // this *won't* find the element
    var vid = document.getElementById("bgvid");
</script>
<video id="bgvid" />

这个：

<video id="bgvid" />
<script type="text/javascript">
    // this *will* find the element
    var vid = document.getElementById("bgvid");
</script>

只要确保代码运行时元素存在，就可以纠正问题。

vid在第6行为null。这意味着代码：

document.getElementById("bgvid")

找不到任何元素。

请确保html中存在id为"bgvid"的元素，或者它是元素的相应id。

相关文章：