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

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

javascript html dom

JavaScript模式未在所有页面上打开,javascript,html,dom,addeventlistener,Javascript,Html,Dom,Addeventlistener,我已经创建了一个JavaScript模式，点击打开它在一个文件中是孤立的，我想在其他页面上重用它，它在index.html页面上运行良好，但是当我想在另一个页面上使用它时，它给了我无法读取null属性'addEventListener'的信息。我尝试在一个窗口中包装我的js模式代码。onload=function（）{}因为我认为DOM没有被完全加载，但它仍然不工作，我如何使它在每个页面上都工作以下是index.html内容： <!DOCTYPE html> <html la

我已经创建了一个JavaScript模式，点击打开它在一个文件中是孤立的，我想在其他页面上重用它，它在index.html页面上运行良好，但是当我想在另一个页面上使用它时，它给了我

无法读取null属性'addEventListener'

的信息。我尝试在一个窗口中包装我的js模式代码。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>

1）在“其他”页面上，将

标记移动到标记的底部，就像在“索引”页面中一样，或者在.js文件中的代码周围添加一个

window.onload=function（）{}

包装

原因是当前在“其他”页面中，脚本是首先加载的。加载时，浏览器会立即执行该命令。因此它立即运行

var modal=document.querySelector（“.modal”）。但是，由于脚本是在
中的任何HTML之前加载的，因此没有与选择器.modal
匹配的元素可用。因此，不会选择任何内容，因此事件侦听器不会附加到任何元素，因此不会触发
2） 此外，您的“other”页面不包含任何类为“trigger”的元素。因此，即使修复了加载问题，行var trigger=document.querySelector（“.trigger”）
仍然不会选择任何内容，当它尝试将事件处理程序附加到nothing时，仍然会出现类似的错误。所以你也需要纠正这一点。（这就是您先前尝试window.onload=function（）{}
失败的原因）
总之，在执行用于目标HTML元素的JavaScript之前，目标HTML元素必须存在。
在第二个HTML文件中，您似乎没有任何带有触发器的元素。这就是您在Console中出错的原因
在body
的末尾包含JavaScript文件（就像您在intex.html
中所做的那样）也是一个很好的做法，以确保JavaScript在加载所有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>

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