[英]I keep getting an “Uncaught ReferenceError: imgArray is not defined” error
I have written some code as an object to fade in and out some images, only when I call for the slideshow to be build, I am getting an 我已经写了一些代码作为淡入和淡出一些图像的对象,只有当我要求构建幻灯片时,我才得到一个
"Uncaught ReferenceError: imgArray is not defined".
“未捕获的ReferenceError:未定义imgArray”。
Can anyone help as to why I am getting this error. 任何人都可以帮助我为什么会收到此错误。 Thank you.
谢谢。
const slideShow = {
curIndex: 0,
imgDuration: 10000,
slider: document.querySelector('.banner__slider').childNodes,
imgArray: [
'images/background/img3.jpg',
'images/background/img1.jpg',
'images/background/img2.jpg'
],
buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
const img = document.createElement('img');
img.src = arr[i];
slider.appendChild(img);
}
},
slideShow() {
function fadeIn(e) {
e.className = "fadeIn";
};
function fadeOut(e) {
e.className = "";
};
fadeOut(slider[curIndex]);
curIndex++;
if (curIndex === slider.length) {
curIndex = 0;
}
fadeIn(slider[curIndex]);
setTimeout(function () {
slideShow();
}, imgDuration);
},
};
slideShow.buildSlideShow(imgArray).slideShow();
You are getting the error because there is no imgArray
variable in the code. 您收到错误,因为代码中没有
imgArray
变量。 You could change this to: 您可以将其更改为:
slideShow.buildSlideShow(slideShow.imgArray).slideShow();
This fixes one issue but creates another one. 这解决了一个问题,但创建了另一个问题。 The
buildSlideShow
method doesn't return anything. buildSlideShow
方法不返回任何内容。 So, .slideShow()
method will again throw an error. 因此,
.slideShow()
方法将再次抛出错误。 Since, imgArray
is a property of slideShow
object, you can make use of the this
keyword. 由于
imgArray
是slideShow
对象的属性,因此您可以使用this
关键字。 Change the method to: 将方法更改为:
buildSlideShow() {
for (i = 0; i < this.imgArray.length; i++) {
const img = document.createElement('img');
img.src = this.imgArray[i];
slider.appendChild(img);
}
return this;
}
From the buildSlideShow
, return the instance of the object by using return this
. 在
buildSlideShow
,使用return this
对象的实例。 This way you can chain the methods. 这样你可以链接方法。
const slideShow = { curIndex: 0, imgDuration: 10000, // slider: document.querySelector('.banner__slider').childNodes, imgArray: [ 'images/background/img3.jpg', 'images/background/img1.jpg', 'images/background/img2.jpg' ], buildSlideShow() { console.log("inside buildSlideShow method"); for (i = 0; i < this.imgArray.length; i++) { console.log(this.imgArray[i]); const img = document.createElement('img'); img.src = this.imgArray[i]; //slider.appendChild(img); } return this; }, slideShow() { console.log("inside slideShow method") } } slideShow.buildSlideShow() .slideShow();
(I have commented out the slider
code) (我已经注释掉
slider
代码)
imgArray
is not a global variable its property of the Object slideShow
. imgArray
不是全局变量,它是Object slideShow
属性。 You should pass slideShow.imgArray
to the function 您应该将
slideShow.imgArray
传递给该函数
slideShow.buildSlideShow(slideShow.imgArray).slideShow();
And also fix the type missing b
in start of uildSlideShow(arr){...}
. 并且还修复了
uildSlideShow(arr){...}
开头缺少b
的类型。 It should be buildSlideShow(arr){...}
它应该是
buildSlideShow(arr){...}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.