[英]I don't know how to fix this error: Uncaught TypeError: Cannot read property 'classList' of undefined
我不確定我在為每個表單字段操作 DOM 元素時做錯了什么。 我正在創建一個圖像輪播。 我正在使用上一個和下一個按鈕。 To go to the next element in the array I am using the class.List property in order to add and remove the "active" part of the class in the HTML. 我認為這是不起作用的原因，但我不知道如何解決。
這是 JavaScript
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
const galleryImgs = document.querySelectorAll(".gallery-img");
let currentlySelected = 0;
nextBtn.addEventListener("click", next);
function next() {
galleryImgs[currentlySelected].classList.remove("active");
currentlySelected++; //currentlySelected=currentlySelected+1
galleryImgs[currentlySelected].classList.add("active");
prevBtn.disabled = false;
}
if (galleryImgs.length === currentlySelected + 1) {
nextBtn.disabled = true;
}
和 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" />
<title>Gallery</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="image-gallery">
<img src="./images/1.jpg" alt="Luna" class="gallery-img active" />
<img src="./images/2.jpg" alt="Luna" class="gallery-img" />
<img src="./images/3.jpg" alt="Luna" class="gallery-img" />
<img src="./images/4.jpg" alt="Luna" class="gallery-img" />
<img src="./images/5.jpg" alt="Luna" class="gallery-img" />
<img src="./images/6.jpg" alt="Luna" class="gallery-img" />
<img src="./images/7.jpg" alt="Luna" class="gallery-img" />
<img src="./images/8.jpg" alt="Luna" class="gallery-img" />
<img src="./images/9.jpg" alt="Luna" class="gallery-img" />
<img src="./images/10.jpg" alt="Luna" class="gallery-img" />
<img src="./images/11.jpg" alt="Luna" class="gallery-img" />
<img src="./images/12.jpg" alt="Luna" class="gallery-img" />
</div>
<div class="btns">
<button disabled="" class="btn prev">Prev</button>
<button class="btn next">Next</button>
</div>
<script src="./gallery.js"></script>
</body>
</html>
你可能想試試這個
const galleryImgs = [...document.querySelectorAll(".gallery-img")];
您的 querySelector 返回一個 nodeList，但它返回一個數組。 所以你可以用他們的索引 select 他們。
問題是關於更新索引，而不是關於數組與 nodelist - document.querySelectorAll nodeLists CAN 可以通過 index 訪問。
問題在於，當您前進到列表末尾時，下一個按鈕沒有被禁用 - 實際上，當您已經在最后一個項目上然后單擊下一步時 - 沒有項目可以獲取類列表 - 因此它是不明確的。
該問題與在節點列表末尾禁用下一個按鈕的邏輯有關。 ...您需要將該邏輯移至 next() function 以便在您選擇最后一項時禁用它。
下面在活動項目周圍放置了一個紅色輪廓，您可以看到單擊下一個按鈕的行為與已執行一樣 - 每次單擊都會增加計數並將活動 class 添加到下一個項目。 我已經換了毛茸茸的小貓圖像，因為我無法訪問您正在使用的圖像並且不喜歡帶有替代文本外觀的損壞圖像。
我已經擴展了你正在做的事情 - 並在 prev 按鈕上添加了一個點擊處理程序和 function 並且類似地 - 如果第一個項目已被重新選擇，則其中有禁用前一個按鈕的邏輯，
我可能會以不同的方式做這件事，並有一個 function 手柄向上或向下 - 但是為獨立操作提供獨立功能很好。
無論哪種方式-您使用的節點列表方法都很好-無需更改擴展運算符-一旦到達數組的末尾，這將無法解決問題-或返回到數組的開頭... :)
const prevBtn = document.querySelector(".prev"); const nextBtn = document.querySelector(".next"); const galleryImgs = document.querySelectorAll(".gallery-img"); let currentlySelected = 0; nextBtn.addEventListener("click", next); prevBtn.addEventListener("click", prev); function next() { galleryImgs[currentlySelected].classList.remove("active"); currentlySelected++; //currentlySelected=currentlySelected+1 galleryImgs[currentlySelected].classList.add("active"); prevBtn.disabled = false; if (galleryImgs.length === currentlySelected + 1) { nextBtn.disabled = true; } } function prev() { galleryImgs[currentlySelected].classList.remove("active"); currentlySelected--; //currentlySelected=currentlySelected+1 galleryImgs[currentlySelected].classList.add("active"); nextBtn.disabled = false; if (currentlySelected == 0) { prevBtn.disabled = true; } }
.active { outline: solid 1px red; } img { height: 50px; width: 50px; }
<,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" /> <title>Gallery</title> <link rel="stylesheet" href="./styles:css" /> </head> <body> <div class="image-gallery"> <img src="https.//cf.ltkcdn.net/cats/images/slide/188392-850x668-Cute-fuzzy-7:jpg" alt="Luna" class="gallery-img active" /> <img src="https.//c8.alamy.com/comp/W7TNYR/fluffy-kitten-8-weeks-among-pink-flowers-W7TNYR:jpg" alt="Luna" class="gallery-img" /> <img src="https.//cf.ltkcdn.net/cats/images/slide/188392-850x668-Cute-fuzzy-7:jpg" alt="Luna" class="gallery-img" /> <img src="https.//c8.alamy.com/comp/W7TNYR/fluffy-kitten-8-weeks-among-pink-flowers-W7TNYR:jpg" alt="Luna" class="gallery-img" /> <img src="https.//cf.ltkcdn.net/cats/images/slide/188392-850x668-Cute-fuzzy-7:jpg" alt="Luna" class="gallery-img" /> <img src="https.//c8.alamy.com/comp/W7TNYR/fluffy-kitten-8-weeks-among-pink-flowers-W7TNYR:jpg" alt="Luna" class="gallery-img" /> <img src="https.//cf.ltkcdn.net/cats/images/slide/188392-850x668-Cute-fuzzy-7:jpg" alt="Luna" class="gallery-img" /> <img src="https.//c8.alamy.com/comp/W7TNYR/fluffy-kitten-8-weeks-among-pink-flowers-W7TNYR:jpg" alt="Luna" class="gallery-img" /> <img src="https.//cf.ltkcdn.net/cats/images/slide/188392-850x668-Cute-fuzzy-7:jpg" alt="Luna" class="gallery-img" /> <img src="https.//c8.alamy.com/comp/W7TNYR/fluffy-kitten-8-weeks-among-pink-flowers-W7TNYR:jpg" alt="Luna" class="gallery-img" /> <img src="https.//cf.ltkcdn.net/cats/images/slide/188392-850x668-Cute-fuzzy-7:jpg" alt="Luna" class="gallery-img" /> <img src="https.//c8.alamy.com/comp/W7TNYR/fluffy-kitten-8-weeks-among-pink-flowers-W7TNYR.jpg" alt="Luna" class="gallery-img" /> </div> <div class="btns"> <button disabled="" class="btn prev">Prev</button> <button class="btn next">Next</button> </div> <script src="./gallery.js"></script> </body> </html>
未捕獲的TypeError：無法讀取未定義的屬性'classList'
[英]Uncaught TypeError: Cannot read property 'classList' of undefined
未捕獲的類型錯誤：無法讀取未定義的屬性“樣式” - 未定義的值，但我不知道為什么
[英]Uncaught TypeError: Cannot read property 'style' of undefined - Undefined values but I don't know why
我不知道該怎么辦，因為發生錯誤-> Uncaught TypeError：無法讀取null的屬性'getContext'
[英]I don't know what to do because an error occurs --> Uncaught TypeError: Cannot read property 'getContext' of null
如何修復“Uncaught TypeError: Cannot read property 'scrollHeight' of undefined”錯誤
[英]how to fix “Uncaught TypeError: Cannot read property 'scrollHeight' of undefined” error
如何修復“未捕獲的類型錯誤：無法讀取未定義的屬性‘替換’”錯誤？
[英]How to fix "Uncaught TypeError: Cannot read property 'replace' of undefined" error?
未捕獲的類型錯誤：無法讀取未定義解決方案的屬性“classList/forEach”？
[英]Uncaught TypeError: Cannot read property 'classList/forEach' of undefined solution?
未捕獲的類型錯誤：無法讀取 Javascript 中未定義（讀取“classList”）的屬性“值”
[英]Uncaught TypeError: Cannot read property 'value' of undefined (reading 'classList') in Javascript
如何修復錯誤“未捕獲的類型錯誤：無法讀取未定義的屬性 'id'”？
[英]How do I fix the error “Uncaught TypeError: Cannot read property 'id' of undefined”?
未捕獲的TypeError：無法讀取null的屬性“ classList”
[英]uncaught TypeError: Cannot read property 'classList' of null
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.