JavaScript 模式未在所有页面上打开答案

【问题标题】：JavaScript modal not opening on all pagesJavaScript 模式未在所有页面上打开
【发布时间】：2023-04-09 14:15:01
【问题描述】：

我创建了一个 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);

【问题讨论】：

标签： javascript html dom addeventlistener

【解决方案1】：

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

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

2) 除此之外，您的“其他”页面不包含任何具有“触发器”类的元素。因此，即使您修复了加载问题，var trigger = document.querySelector(".trigger"); 行仍然不会选择任何内容，并且当它尝试将事件处理程序附加到任何内容时，您仍然会收到类似的错误。所以你也需要纠正它。（这就是您之前尝试window.onload = function() {} 失败的原因）。

总而言之 - 您所定位的 HTML 元素必须在您用来定位它们的 JavaScript 执行之前存在。

【讨论】：

【解决方案2】：

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

在 body 的末尾包含您的 JavaScript 文件（就像您在 intex.html 中所做的那样）也是一个很好的做法，以确保 JavaScript 将在所有 HTML 元素加载后运行。

【讨论】：