Question

我创建了一个JavaScript模态，该模态在单击时打开，它被隔离在一个文件中，我想在其他页面上重用它，在index.html页面上它可以正常工作，但是当我想在另一页面上使用它时我Cannot read property 'addEventListener' of null我尝试将js模式代码包装在window.onload = function（）{}中，因为我认为DOM尚未完全加载，但再次无法正常工作，我如何使其能够正常工作每页？

这是index.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="./css/main.css">
  <link rel="stylesheet" type="text/css" href="./css/modal.css">
  <title>Word Spelling Game</title>
</head>
<body>
  <div class="menu">
      <audio controls autoplay loop>
          <source src="./sounds/menu-song.mp3" type="audio/mp3">
          Your browser does not support the audio element.
        </audio>
    <a href="./pages/game-menu.html">
      <img src="./images/choose-game-sign.png" class="board"> 
    </a>
    <div>
    <img src="./images/help-sign.png" class="board trigger">
    <div class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
           <h1>Welcome!</h1>
           <article>
             This is a collection of interactive games designed for children, each game
             aims to further develop the childs skill set in a variety of tasks that involve
             spelling, writing and simple math. It is designed in a fun way so that your kid will never become bored!
             There are different levels of difficulty for different ages. To select and play
             a level click on the Choose level tab above this one. You can see each game's rules
             by clicking on the rules tab that is located on the right corner on each level. The instructions are written in 
             a way that every kid can understand in case that he get's stuck at some point.
           </article>
        </div>
    </div>
    </div>
  </div>
  <script src="./scripts/help-modal.js"></script>
</body>
</html>

用户单击“选择游戏”链接后到达的我要使用的其他页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css//game-menu.css">
  <link rel="stylesheet" type="text/css" href="../css/modal.css">
  <script src="../scripts/help-modal.js"></script>
  <title>Levels</title>
</head>
<body>
  <a href="../index.html">
  <img src="../images/back-sign.png">
  </a>
  <div class="help">
      <p class="question-mark">?</p>
      <div class="modal">
          <div class="modal-content">
              <span class="close-button">&times;</span>
             <h1>Welcome!</h1>
             <article>
               This is a collection of interactive games designed for children, each game
               aims to further develop the childs skill set in a variety of tasks that involve
               spelling, writing and simple math. It is designed in a fun way so that your kid will never become bored!
               There are different levels of difficulty for different ages. To select and play
               a level click on the Choose level tab above this one. You can see each game's rules
               by clicking on the rules tab that is located on the right corner on each level. The instructions are written in 
               a way that every kid can understand in case that he get's stuck at some point.
             </article>
          </div>
      </div>
    </div>
</body>
</html>

和我的help-modal.js文件：

var modal = document.querySelector(".modal");
    var trigger = document.querySelector(".trigger");
    var closeButton = document.querySelector(".close-button");

    function toggleModal() {
        modal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
        if (event.target === modal) {
            toggleModal();
        }
    }

    trigger.addEventListener("click", toggleModal);
    closeButton.addEventListener("click", toggleModal);
    window.addEventListener("click", windowOnClick);

Answer 1

在第二个HTML文件中，您似乎没有trigger类的任何元素。这是您在控制台中出错的原因。

在body末尾包含JavaScript文件（就像您在intex.html中所做的一样）也是一种好习惯，以确保JavaScript在所有HTML元素加载后都能运行

Answer 2

1）在“其他”页面上，将<script>标签移动到标记的底部，就像在“索引”页面中一样，或者在其中的代码周围添加window.onload = function() {}包装器.js文件。

这样做的原因是当前在“其他”页面中，脚本首先被加载。加载后，浏览器会立即执行它。因此它立即运行var modal = document.querySelector(".modal");。但是，由于脚本是在<body>中的任何HTML之前加载的，因此没有与选择器.modal匹配的可用元素。因此没有选择任何内容，因此事件侦听器未附加到任何元素，因此永远不会触发。

2）另外，您的“其他”页面不包含任何类别为“触发”的元素。因此，即使您解决了加载问题，行var trigger = document.querySelector(".trigger");仍然不会选择任何内容，并且在尝试将事件处理程序不附加任何内容时，您仍然会遇到类似的错误。因此，您也需要进行更正。（这就是您先前尝试window.onload = function() {}失败的原因。

总结-您要定位的HTML元素必须先存在，然后才能执行用于定位它们的JavaScript。

无法在所有页面上打开JavaScript模式

2 个答案: