'Not a Function' Error keep appearing when building a infinate scroll carousel and I dont know how to fix the problem

Question

I've been trying to build an infinite scroll blog carousel. I found a tutorial and followed it. Even watched it again to double-check that the code was correct but I keep getting an error in the console which I do not know how to fix.

Here's the code

var infinateScroll = document.querySelectorAll(".infinate-scroll");
var infinateScrollItems = document.querySelectorAll(".infinate-scroll .iscroll-item");
let clones = [];
let disableScroll = false;
let scrollWidth = 0;
let scrollPosition = 0;
let clonesWidth = 0;

function getScrollPosition() {
    return infinateScroll.scrollLeft;
}

function setScrollPosition(e) {
    infinateScroll.scrollLeft = e;
}

function getClonesWidth() {
    clonesWidth = 0;
    
    clones.forEach(clone => {
        clonesWidth += clone.offsetWidth;
    });
    
    return clonesWidth;
}

function reCalc() {
    scrollPosition = getScrollPosition();
    scrollWidth = infinateScroll.scrollWidth;
    clonesWidth = getClonesWidth();
    
    if(scrollPosition <= 0) {
        setScrollPosition(1);
    }
}

function scrollUpdate() {
    if(!disableScroll) {
        scrollPosition = getScrollPosition();
        if(clonesWidth + scrollPosition >= scrollWidth) {
            setScrollPosition(1);
            disableScroll = true;
        } 
        
        else if (scrollPosition <= 0) {
            setScrollPosition(scrollWidth - clonesWidth);
            disableScroll = true;
        }
    }
    
    if(disableScroll) {
        window.setTimeout(() => {
            disableScroll = false;
        }, 40);
    }
}

function onLoad() {
    infinateScrollItems.forEach(ScrollItem => {
        const cloneItems = ScrollItem.cloneNode(true);
        infinateScroll.appendChild(cloneItems);
        cloneItems.classList.add('js-clone');
    });
    
    clones = infinateScroll.querySelectorAll('.js-clones');
    
    reCalc();
    
    infinateScroll.addEventListener('scroll', () => {
        window.requestAnimationFrame(scrollUpdate);
    }, false);
    
    window.addEventListener('resize', () => {
        window.requestAnimationFrame(reCalc);
    }, false);
}

window.onload = onLoad();

The error I'm getting is for this line of code; infinateScroll.appendChild(cloneItems); The error says "infinateScroll.appendChild is not a function" and I don't know what I need to do or change to fix the issue. Any help on the matter would be very helpful. Thanks

Answer 1

when using .querySelectorAll, you should receive a nodeList as array as result. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

So you need to use the first item of infinateScroll, by using the array accessor [].

var infinateScroll = document.querySelectorAll(".infinate-scroll")[0];

alternatively, use querySelector() which returns a single Element object https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

var infinateScroll = document.querySelector('.infinate-scroll');