Uncaught TypeError: querySelector is not a function

Question

Getting a really strange JS error.

I'm using isotope.js to filter items via some filter buttons and a search field like in this example .

My use case is slightly different as I'm looking to search the contents of a specific child element within the parent and not the whole element. I've made some edits to the example code to suit my needs and convert it to vanilla JS so my version of the initialisation looks like this:

 var qsRegex; var buttonFilter; var iso = new Isotope('.gridListing', { itemSelector: '.gridItem', percentPosition: true, layoutMode: 'fitRows', stagger: 30, filter: function(itemElem) { var name = itemElem.querySelector('.name').textContent; const searchResult = qsRegex ? text.match(qsRegex) : true; const buttonResult = buttonFilter ? itemElem.classList.contains(buttonFilter) : true; return searchResult && buttonResult; }, masonry: { columnWidth: '.grid-sizer' } }); 

This code works absolutely fine in my local environment which is running using WebPack. When I compile the code and copy across to my live site running a WordPress install I get the following error message.

"Uncaught TypeError: itemElem.querySelector is not a function"

I'm not sure what would cause the code to run fine locally but fail on a live server. If anyone could point me in the right direction it would be hugely helpful.

Answer 1

) Try this filter block

filter: function(index, item) {
    var name = item.querySelector('.name').textContent;
    const searchResult = qsRegex ? text.match(qsRegex) : true;
    const buttonResult = buttonFilter ? item.classList.contains(buttonFilter) : true;
    return searchResult && buttonResult;
},