时间戳

首页 > 解决方案 > HTML5脚本标签内的js代码可以工作，但不能在外部js文件中

javascript - HTML5脚本标签内的js代码可以工作，但不能在外部js文件中

问题描述

如果此代码在 index.html 中的脚本标记内，它可以正常工作，但是当将此代码移动到头部引用的 js 文件时，它不再有效。我的一个想法是使用 window.onload 但无法使其正常工作。这是一个简单的本地 HTML5 视频播放器。自从我使用外部 js 以来已经有一段时间了。谁能帮我吗？

var myVideo = document.getElementById("myVideo");

function playPause() {
  var el = document.getElementById("playButton");
  if (myVideo.paused) {
    myVideo.play();
    el.className ="";
  } else {
  
    myVideo.pause();
    el.className = "playButton";
  }
}
myVideo.addEventListener("click", playPause, false);
var pause42 = function(){
    if(this.currentTime >= 13 && !myVideo.paused) {
      this.currentTime = 42;
        this.pause();

        // remove the event listener after you paused the playback
        this.removeEventListener("timeupdate",pause42);
    }
};
myVideo.addEventListener("timeupdate", pause42);

var pause49 = function(){
    if(this.currentTime >= 45 && !myVideo.paused) {
      this.currentTime = 49;
        this.pause();

        // remove the event listener after you paused the playback
        this.removeEventListener("timeupdate",pause49);
    }
};
myVideo.addEventListener("timeupdate", pause49);

标签： javascripthtml

解决方案

包装var myVideo = document.getElementById("myVideo")一个DOMContentLoaded事件，以便在尝试获取 JS 文件中的元素之前加载 HTML 元素。

然后将您的事件侦听器添加到与下面相同的函数中。

document.addEventListener('DOMContentLoaded', function(){
    var myVideo = document.getElementById("myVideo");
    myVideo.addEventListener("click", playPause, false);
    myVideo.addEventListener("timeupdate", pause42);
    myVideo.addEventListener("timeupdate", pause49);
});

推荐阅读