javascript - Javascript帮助(入门)

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        上个月关闭。



我是JavaScript的初学者，正在编写一些视频控件。当我在Chrome中打开时，出现以下错误“未捕获的TypeError：无法读取null的属性'addEventListener'
    在HTMLDocument.initialiseWebPage（VideoScript.js：26）“

错误指向最后一行。有任何想法吗？

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>

最佳答案

您正在尝试像这样访问元素：
const playButton = document.getElementById("playPause");在这里，您指定id为playPause，但您的实际ID为PlayPause。这也许就是为什么playButton未定义的原因。