我正在嘗試打開和關閉類串列，以便在單擊按鈕時，模式的不透明度更改為 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");
});
uj5u.com熱心網友回復：
您的腳本標簽位于 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>
產生從回傳的 nulldocument.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] }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/460801.html
標籤：javascript html jQuery css