Uncaught ReferenceError for filter group items

Question

This is all my code. This is all my code. I want to know. Why do I want to run all the filters together? I'm having trouble.

function customFilter(list, field, value){

    return list.filter(item=> {
            if(typeof(filter) === 'Object'){
                value.foreach(val => {
                    if (item[field] === value){
                        return item[field] === value

                    }
                });
            }
            return item[field] === value
        });
}
function checkedInputs() {
    return [...querySelector('.filter_type .customCheck')].map((c) => c.checked);
}


let filterCheckboxes = document.querySelectorAll('.customCheck');

filterCheckboxes.forEach(checkbox =>checkbox.addEventListener('change' , (e) =>{
    e.preventDefault();
    var checkboxes = checkedInputs();
    var filteredList = FlyList;
    checkboxes.forEach(checkbox => {
       let filterTypeElement = findFilterTypeElement(checkbox);
       if (filterTypeElement) {
         let field = filterTypeElement.getAttribute('data-field');
         let val = e.target.value;
         console.log(field,val);
         filteredList = customFilter(filteredList, field , val);
       }
    });
}));

function getParents(el, parentSelector /* optional */) {

    // If no parentSelector defined will bubble up all the way to *document*
    if (parentSelector === undefined) {
        parentSelector = document;
    }

    var parents = [];
    var p = el.parentNode;

    while (p && (p !== parentSelector || p.parentNode)) {
        var o = p;
        parents.push(o);
        p = o.parentNode;
    }
    parents.push(parentSelector); // Push that parentSelector you wanted to stop at

    return parents;
}

function findFilterTypeElement(el)
{
    var result = null;
    var parents = getParents(el);

    parents.forEach((item) => {
        if(hasClass(item,'filter_type') && result == null)
        {
            result = item;
        }   
    });
    return result;
}

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

To make you understand. I got a picture of my code error.

Uncaught ReferenceError: querySelector is not defined at checkedInputs (functions.js:1013) at HTMLLabelElement.checkbox.addEventListener (functions.js:1022)

You will see the code and image code error. Please help. Where is the code problem?

Answer 1

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

the return value of .querySelector() an element and not a collection of elements and therefor it is not iterable, that's why you're getting the error, use querySelectorAll instead .

replace

function checkedInputs() {
    return [...querySelector('.filter_type .customCheck')].map((c) => c.checked);
}

with

function checkedInputs() {
    return [...querySelectorAll('.filter_type .customCheck')].map((c) => c.checked);
}