未捕获的 TypeError:向模态添加功能时无法读取 null 的属性(读取“addEventListener”)

我正在尝试打开和关闭类列表,以便在单击按钮时将模式的不透明度更改为 1,并且在单击关闭按钮时关闭类列表。

在控制台中,我看到错误:Uncaught TypeError: Cannot read properties of null (reading '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 (样式.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");
});
stack overflow Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') when adding functionality to modal
原文答案
author avatar

接受的答案

您的脚本标签位于 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 返回的 null

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] }

答案:

作者头像

您不必将整个脚本标记向下移动,只需将“延迟”添加到脚本标记,以便它在执行之前等待整个文档加载。

相关问题