Question

未捕获的类型错误：向模式添加功能时无法读取 null 的属性（读取“addEventListener”）

2022-04-21

3098

javascript html jquery css

我尝试打开和关闭类列表，这样当单击按钮时，模式的不透明度会更改为 1，而当单击关闭按钮时，类列表会关闭。

在控制台中，我看到错误：未捕获的 TypeError：无法读取 null 的属性（读取“addEventListener”）

我检查以确保没有拼写错误，但我没有看到任何拼写错误。我不明白为什么会出现错误。

HTML (index.html)

<button class="rulesButton">RULES</button>
  <div class="modal">
    <div class="modalContainer">
      <header class="modalHeader">
        <h2 class="modalHeading">RULES</h2>
        <button class="closeButton">
          <img src="/images/icon-close.svg" alt="Close button">
        </button>
      </header>
      <img src="/images/image-rules.svg" alt="Rules image" class="rulesImage">
    </div>
  </div>

CSS (styles.css)

.rulesButton {
    background: transparent;
    border: 2px solid white;
    border-radius: 0.8rem;
    bottom: 2rem;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
    right: 2rem;
    outline: none;
    padding: 0.6rem 2.4rem;
    position: absolute;
}

.modal {
    background: #0000004d;
    display: grid;
    height: 100%;
    left: 0;
    opacity: 0;
    place-items: center;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease-in-out;
    width: 100%;
}

.modalContainer {
    background: white;
    border-radius: 1.5rem;
}

.modalHeader {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    width: 100%;
}

.modalHeading {
    color: hsl(229, 25%, 31%);
    font-size: 1.5rem;
}

.closeButton {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
}

.rulesImage {
    padding: 2rem 4rem;
}

.showModal { /* toggles on and off */
    opacity: 1;
    pointer-events: initial;
}

JavaScript (index.js)

const buttonRules = document.querySelector(".rulesButton");
const buttonClose = document.querySelector(".closeButton");
const modal = document.querySelector(".modal");

//Toggle Modal 
buttonRules.addEventListener("click", () => {
    modal.classList.toggle("showModal");
});

buttonClose.addEventListener("click", () => {
    modal.classList.toggle("showModal");
});

Answer 1

您的脚本标签位于 HTML 文档的什么位置？如果它位于 <head> 中，则 JavaScript 将在浏览器解析文档其余部分之前开始运行。这意味着按钮尚不存在，因此为 null 。

如果是这种情况，您可以通过在 HTML 文档中查询的元素后添加脚本标记来修复它。

示例：

JavaScript

const testDiv = document.querySelector(".test");
console.log(testDiv.addEventListener);

HTML 脚本之前

<!DOCTYPE html>
<html>
  <head>
    <script src="select.js"></script>
  </head>
  <body>
    <div class="test">Hello world</div>
  </body>
</html>

生成从 document.querySelector

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at select.js:3:21


  
   HTML 脚本之后
  
  <!DOCTYPE html>
<html>
  <body>
    <div class="test">Hello world</div>
    <script src="select.js"></script>
  </body>
</html>

  
   生成定义的函数
  
  ƒ addEventListener() { [native code] }

Answer 2

您不必将整个脚本标记向下移动，只需将“defer”添加到脚本标记，以便它等待整个文档加载后再执行。