Javascript help (beginner)

Zubair Ali

I am a a beginner at JavaScript and was writing some video controls. When i open in chrome i get the following error "Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument.initialiseWebPage (VideoScript.js:26)"

The error points to the last line. Any ideas?

document.addEventListener('DOMContentLoaded', initialiseWebPage);

function initialiseWebPage() {
  const myVideo = document.querySelector("video");
  myVideo.removeAttribute("controls");
  const playButton = document.getElementById("playPause");


  function PlayPause() {
    if (myVideo.paused === true) {
      myVideo.play();
      //
      playButton.innerHTML = "Pause";
    } else {
      myVideo.pause();
      playButton.innerHTML = "Play";
    }
  }
  playButton.addEventListener("click", PlayPause);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>MMU VIDEO</title>
  <script src="scripts/VideoScript.js"></script>
</head>

<body>
  <header>
    <h1></h1>
  </header>

  <section id="videoContainer">
    <video width="640" height="360" poster="images/poster.jpg">
	<source src="Videos/mp4/MMU.mp4" type="video/mp4">
	<source src="Videos/webm/MMU.webm" type=video/webm">
	<p> Your browser does not support HTML5 video. You can download the video 
    file <a href="videos/mp4/MMU.mp4">here</a> instead.</p>	
	</video>

    <div id="VideoControls">
      <button type="button" id="PlayPause">Play</button>
    </div>
    <!-- </section> -->
</body>

</html>

Barzev

You're trying to access an element like so: const playButton = document.getElementById("playPause"); Here you specify id playPause, but your actual id is PlayPause. This is perhaps why playButton is undefined.

Collected from the Internet

Please contact [email protected] to delete if infringement.