Uncaught ReferenceError для элементов группы фильтров

Question

Это весь мой код.Это весь мой код.Я хочу знать.Почему я хочу запустить все фильтры вместе?У меня проблемы.

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;
}

Чтобы вы поняли.Я получил изображение моей ошибки в коде.

Uncaught ReferenceError: querySelector не определен в checkInputs (functions.js: 1013) в HTMLLabelElement.checkbox.addEventListener (functions.js: 1022)

Вы увидите код и изображение ошибки кода.Пожалуйста помоги.Где проблема с кодом?

Answer 1

Метод Document querySelector () возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов.Если совпадений не найдено, возвращается null.

возвращаемое значение .querySelector() элемента, а не набора элементов, и поэтому оно не повторяется, поэтому вы получаете ошибку,используйте взамен querySelectorAll .

замените

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

на

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