[英]TypeError: Cannot read property 'classList' of undefined with Image-Slider
I'm currently working on a website where I use Strapi as a CMS and Next.js(React) in Frontend.我目前正在一个网站上工作,我在其中使用Strapi作为 CMS 并在前端使用Next.js(React) 。 The site also has an image slider which obviousely contains an image, a headline and a description.该网站还有一张图片 slider 显然包含图片、标题和描述。
After some time on the website the following error occurs and the slider stops from working or does things like showing all slides really fast one behind the other.在网站上使用一段时间后,出现以下错误,slider 停止工作,或者执行诸如快速依次显示所有幻灯片的操作。 What can I do to solve this?我能做些什么来解决这个问题?
Unhandled Runtime Error TypeError: Canot read property 'classList' of undefined未处理的运行时错误类型错误:无法读取未定义的属性“classList”
I've already tried many solutions I found here on StackOverflow, but nothing worked... I am just not able to find the error in my code, which is the following: (/components/image-slider file)我已经尝试了很多我在 StackOverflow 上找到的解决方案,但没有任何效果......我只是无法在我的代码中找到错误,如下所示:(/components/image-slider 文件)
import ...
const Slider = ({...}) => {
if (typeof window !== 'undefined') {
var slides = document.querySelectorAll('.slide');
var btns = document.querySelectorAll('.btn-navig');
let currentSlide = 1;
// Javascript for image slider manual navigation
var manualNav = function(manual){
slides.forEach((slide) => {
slide.classList.remove('active');
btns.forEach((btn) => {
btn.classList.remove('active');
});
});
slides[manual].classList.add('active');
btns[manual].classList.add('active');
}
btns.forEach((btn, i) => {
btn.addEventListener("click", () => {
manualNav(i);
currentSlide = i;
});
});
// // Javascript for image slider autoplay navigation
var repeat = function(activeClass){
let active = document.getElementsByClassName('active');
let i = 1;
var repeater = () => {
setTimeout(function(){
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
btns[i].classList.add('active');
i++;
if(slides.length == i){
i = 0;
}
if(i >= slides.length){
return;
}
repeater();
}, 10000);
}
repeater();
}
repeat();
}
if (error) {
return <div>An error occured: {error.message}</div>;
}
return (
<div className="img-slider">
<div className="slide active">
<div className="info">
// content
</div>
</div>
<div className="slide">
<div className="info">
// content
</div>
</div>
// further slides
<div className="navigation">
<div className="btn-navig active"></div>
<div className="btn-navig"></div>
<div className="btn-navig"></div>
</div>
</div>
);
};
// axios request ...
export default Slider;
I hope someone can help me with the above mentioned problem.我希望有人可以帮助我解决上述问题。 Thanks a lot!非常感谢!
Your first flaw in the code is this one您在代码中的第一个缺陷是这个
var manualNav = function(manual){
slides.forEach((slide) => {
slide.classList.remove('active');
btns.forEach((btn) => {
btn.classList.remove('active');
});
});
slides[manual].classList.add('active');
btns[manual].classList.add('active');
}
Here, with every new slide
of slides[]
, you start a new btns[]
loop.在这里,每张新的slides[]
slide
您都会开始一个新的btns[]
循环。
btns.forEach((btn) => {
btn.classList.remove('active');
});
But this is just unnecessary processing time that gets lost.但这只是丢失的不必要的处理时间。 Do it this way:这样做:
var manualNav = function(manual){
slides.forEach((slide) => {
slide.classList.remove('active');
});
btns.forEach((btn) => {
btn.classList.remove('active');
});
slides[manual].classList.add('active');
btns[manual].classList.add('active');
}
Your actual problem is this.你的实际问题是这样的。
You have 3 div
with the class btn-navig
but only 2 with the class slide
. class btn-navig
有 3 个div
,但 class slide
只有 2 个。 But in your repeater()
you increase i
by 1 with every new loop.但是在您的repeater()
中,每个新循环都会将i
增加 1。
slides[i].classList.add('active');
btns[i].classList.add('active');
i++;
With the second iteration you have the following situation:在第二次迭代中,您会遇到以下情况:
slides[2].classList.add('active'); // undefined
btns[2].classList.add('active'); // value
There is no slides[2]
as only slides[0]
and slides[1]
have values.没有slides[2]
因为只有slides[0]
和slides[1]
有值。
You have to rethink your indexing-approach.你必须重新考虑你的索引方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.