[英]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.