我不知道如何解决这个错误：Uncaught TypeError: Cannot read property 'classList' of undefined
[英]I don't know how to fix this error: Uncaught TypeError: Cannot read property 'classList' of undefined
问题描述
I am not really sure what am I doing wrong in manipulating DOM element for each form field.
我不确定我在为每个表单字段操作 DOM 元素时做错了什么。 I am creating an image carousel.我正在创建一个图像轮播。 I am using previous and next buttons.我正在使用上一个和下一个按钮。 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. 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. I thinks that's the reason is not working but I don't know how to fix it.我认为这是不起作用的原因，但我不知道如何解决。
Here's the JavaScript这是 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;
}
and the HTML:和 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>
2 个解决方案
解决方案1
1 2021-03-07 09:59:14
You might wanna try this你可能想试试这个
const galleryImgs = [...document.querySelectorAll(".gallery-img")];
Your querySelector returns a nodeList, but this it returns an array.您的 querySelector 返回一个 nodeList，但它返回一个数组。 So you can select them with their index.所以你可以用他们的索引 select 他们。
解决方案2
0 2021-03-07 10:07:00
The problem is about updating the index and is NOT about the array versus nodelist - document.querySelectorAll nodeLists CAN be accessed via index .问题是关于更新索引，而不是关于数组与 nodelist - document.querySelectorAll nodeLists CAN 可以通过 index 访问。
The problem was around the next button not being disabled when you have progressed to the end of the list - in effect when you are already on the last item and then you click next - there is no item to get the classList of - hence it is undefined.问题在于，当您前进到列表末尾时，下一个按钮没有被禁用 - 实际上，当您已经在最后一个项目上然后单击下一步时 - 没有项目可以获取类列表 - 因此它是不明确的。
The issue is related to the logic about disabling the next button when it is at the end of the nodelist.该问题与在节点列表末尾禁用下一个按钮的逻辑有关。 ... you need to move that logic ito the next() function so that it is diabled when you have selected the last item. ...您需要将该逻辑移至 next() function 以便在您选择最后一项时禁用它。
The following puts a red outline around the active item and you can see that clicking the next button behaves as exected - with each click incrmenting the count and adding the active class to the next item.下面在活动项目周围放置了一个红色轮廓，您可以看到单击下一个按钮的行为与已执行一样 - 每次单击都会增加计数并将活动 class 添加到下一个项目。 I have swapped in fluffy kitten images since I don't have acces to the images you are using and didn't like the broken image with alt text look.我已经换了毛茸茸的小猫图像，因为我无法访问您正在使用的图像并且不喜欢带有替代文本外观的损坏图像。
I have extended what you are doing - and have added a click-handler and function onto the prev button and similarly - have the logic in there to disable the e previous button if the first item has been reselected,我已经扩展了你正在做的事情 - 并在 prev 按钮上添加了一个点击处理程序和 function 并且类似地 - 如果第一个项目已被重新选择，则其中有禁用前一个按钮的逻辑，
I would probably do this differently and have one function thst an handle oing up or down - but it is fine to have indiv functions for indiv actions.我可能会以不同的方式做这件事，并有一个 function 手柄向上或向下 - 但是为独立操作提供独立功能很好。
Either way - the nodelist approach you used was fine - without the spread operator change - which will not resolve the issue once you have reached the end of the array - or returned to the start of it... :)无论哪种方式-您使用的节点列表方法都很好-无需更改扩展运算符-一旦到达数组的末尾，这将无法解决问题-或返回到数组的开头... :)
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.