Flickity: Uncaught TypeError: Cannot read property 'querySelectorAll' of null
Flickity: Uncaught TypeError: Cannot read property 'querySelectorAll' of null
我已经调试了几个小时的 js 代码,我无法消除错误。我错过了什么或添加了一些不正确的代码吗?错误说:
consultationSlider.js:9 未捕获类型错误:cellsButtons.querySelectorAll 不是函数
在 consultationSlider (consultationSlider.js:9)
在 HTML 文档。 (index.js:16)
这是我的代码:
JS
const consultationSlider = () => {
const elem = document.querySelector('.consultation-slider');
const cellsButtonGroup = document.querySelector('.consultation-slider__nav-wrap');
const cellsButtons = cellsButtonGroup.querySelectorAll('.consultation-slider__nav');
const flkty = new Flickity( elem, {
pageDots: false,
wrapAround: true,
imagesLoaded: true,
cellAlign: 'center'
});
// if(elem) {
// new Flickity( elem, {
// pageDots: false,
// wrapAround: true,
// cellAlign: 'center'
// });
// }
for (const [i, cellsButton] of cellsButtons.entries()) {
cellsButton.addEventListener('click', function(event) {
flkty.select( i );
})
}
if (typeof NodeList.prototype.forEach !== 'function') {
NodeList.prototype.forEach = Array.prototype.forEach;
}
}
导出默认咨询滑块;
SCSS
.consultation-slider {
width: getvw(1200px);
height: getvw(800px);
@include sp {
width: 100%;
height: 100%;
}
&__cell {
width: getvw(1200px);
height: getvw(800px);
@include sp {
width: 100%;
height: auto;
}
}
&__nav {
display: block;
width: getvw(160px);
height: getvw(108px);
margin-top: getvw(10px);
cursor: pointer;
@include sp {
width: getvw(230px);
height: auto;
margin-top: getsp375(10px);
}
}
&__nav-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: getvw(1200px);
@include sp {
width: 100%;
}
}
&__row {
text-align: center;
width: getvw(1200px);
@include sp {
width: 100%;
}
}
.flickity-button-icon {
display: none;
}
.next,
.previous {
height: 80px;
width: 80px;
border: 1px solid $white;
border-radius: 0;
background: transparent;
@include sp {
display: none;
}
&::before {
content: '';
position: absolute;
width: 11px;
height: 18px;
bottom: 50%;
transform: translateX(-50%) translateY(50%);
background: {
image: url('/img/icons/slider-arrow.png');
size: 100%;
repeat: no-repeat;
}
@include sp {
display: none;
}
}
}
.previous {
&::before {
transform: rotate(180deg) translateX(50%) translateY(-50%);
}
}
}
哈巴狗
.consultation-slider
img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
.consultation-slider__button-row
.consultation-slider__nav-wrap
img.consultation-slider__nav(src='/img/gray-bg-small.jpg')
img.consultation-slider__nav(src='/img/gray-bg-small.jpg')
我的代码是 运行 在页面上存在 dom 元素之前,因此当它尝试查询页面中的元素时,结果为空
我确保我的代码在 dom 加载后执行
所以我在这里添加了 if 语句:
const consultationSlider = () => {
const elem = document.querySelector('.consultation-slider');
如果(元素){
const flkty = new Flickity(元素, {
pageDots:假的,
环绕:真,
图片加载:真实,
单元格对齐:'center'
});
const cellsButtonGroup = document.querySelector('.consultation-slider__nav-wrap');
const cellsButtons = cellsButtonGroup.querySelectorAll('.consultation-slider__nav');
for (const [i, cellsButton] of cellsButtons.entries()) {
cellsButton.addEventListener('click', 函数(事件) {
flkty.select(我);
})
}
}
}
导出默认咨询滑块;
我已经调试了几个小时的 js 代码,我无法消除错误。我错过了什么或添加了一些不正确的代码吗?错误说:
consultationSlider.js:9 未捕获类型错误:cellsButtons.querySelectorAll 不是函数 在 consultationSlider (consultationSlider.js:9) 在 HTML 文档。 (index.js:16)
这是我的代码:
JS
const consultationSlider = () => {
const elem = document.querySelector('.consultation-slider');
const cellsButtonGroup = document.querySelector('.consultation-slider__nav-wrap');
const cellsButtons = cellsButtonGroup.querySelectorAll('.consultation-slider__nav');
const flkty = new Flickity( elem, {
pageDots: false,
wrapAround: true,
imagesLoaded: true,
cellAlign: 'center'
});
// if(elem) {
// new Flickity( elem, {
// pageDots: false,
// wrapAround: true,
// cellAlign: 'center'
// });
// }
for (const [i, cellsButton] of cellsButtons.entries()) {
cellsButton.addEventListener('click', function(event) {
flkty.select( i );
})
}
if (typeof NodeList.prototype.forEach !== 'function') {
NodeList.prototype.forEach = Array.prototype.forEach;
}
}
导出默认咨询滑块; SCSS
.consultation-slider {
width: getvw(1200px);
height: getvw(800px);
@include sp {
width: 100%;
height: 100%;
}
&__cell {
width: getvw(1200px);
height: getvw(800px);
@include sp {
width: 100%;
height: auto;
}
}
&__nav {
display: block;
width: getvw(160px);
height: getvw(108px);
margin-top: getvw(10px);
cursor: pointer;
@include sp {
width: getvw(230px);
height: auto;
margin-top: getsp375(10px);
}
}
&__nav-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: getvw(1200px);
@include sp {
width: 100%;
}
}
&__row {
text-align: center;
width: getvw(1200px);
@include sp {
width: 100%;
}
}
.flickity-button-icon {
display: none;
}
.next,
.previous {
height: 80px;
width: 80px;
border: 1px solid $white;
border-radius: 0;
background: transparent;
@include sp {
display: none;
}
&::before {
content: '';
position: absolute;
width: 11px;
height: 18px;
bottom: 50%;
transform: translateX(-50%) translateY(50%);
background: {
image: url('/img/icons/slider-arrow.png');
size: 100%;
repeat: no-repeat;
}
@include sp {
display: none;
}
}
}
.previous {
&::before {
transform: rotate(180deg) translateX(50%) translateY(-50%);
}
}
}
哈巴狗
.consultation-slider
img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
.consultation-slider__button-row
.consultation-slider__nav-wrap
img.consultation-slider__nav(src='/img/gray-bg-small.jpg')
img.consultation-slider__nav(src='/img/gray-bg-small.jpg')
我的代码是 运行 在页面上存在 dom 元素之前,因此当它尝试查询页面中的元素时,结果为空 我确保我的代码在 dom 加载后执行 所以我在这里添加了 if 语句:
const consultationSlider = () => { const elem = document.querySelector('.consultation-slider');
如果(元素){ const flkty = new Flickity(元素, { pageDots:假的, 环绕:真, 图片加载:真实, 单元格对齐:'center' }); const cellsButtonGroup = document.querySelector('.consultation-slider__nav-wrap'); const cellsButtons = cellsButtonGroup.querySelectorAll('.consultation-slider__nav'); for (const [i, cellsButton] of cellsButtons.entries()) { cellsButton.addEventListener('click', 函数(事件) { flkty.select(我); }) } } }
导出默认咨询滑块;