js code inside script tags of HTML5 work but not in external js file

Question

If this code is inside script tags in index.html it works fine but when moving this code to a js file referenced in the head it no longer works. One thought I had was to use window.onload but was not able to get that working. This is for a simple local HTML5 video player. It's been a while since I worked with external js. Can anyone help me out?

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

See Why is “Can someone help me?” not an actual question?. Is your <script> above your HTML with no defer attribute and no DOMContentLoaded or load listener? See Why does jQuery or a DOM method such as getElementById not find the element?. What Do You Mean “It Doesn’t Work”? Use the browser console (dev tools) (hit F12) and read any errors. — Sebastian Simon
– Sebastian Simon, Commented Oct 19, 2020 at 23:43

Josh Bonnick · Accepted Answer · 2020-10-19 23:50:54Z

2

Wrap var myVideo = document.getElementById("myVideo") in a DOMContentLoaded event so the HTML element is loaded before trying to get the element in your JS file.

Then add your event listeners inside the same function as below.

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

edited Oct 19, 2020 at 23:50

answered Oct 19, 2020 at 23:44

Josh Bonnick

2,9032 gold badges14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

js code inside script tags of HTML5 work but not in external js file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related