I've spent hours debugging my JavaScript code, but I can't seem to get rid of this error. Did I overlook something or add incorrect code? The error message reads:
consultationSlider.js:9 Uncaught TypeError: cellsButtons.querySelectorAll is not a function at consultationSlider (consultationSlider.js:9) at HTMLDocument. (index.js:16)
Below are the snippets of my code:
JavaScript
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'
});
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;
}
}
export default consultationSlider;
SCSS
.consultation-slider {
width: getvw(1200px);
height: getvw(800px);
...remaining CSS code...
PUG
.consultation-slider
img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
...remaining PUG code...