how to match both the filter value to lower case

here how can i get the classList to lowerCase

    function filterResults() {
        const filter1Value = filter1.value;
        const filter2Value = filter2.value;
        // Get values of additional filters as needed
        filteredList.forEach((el) => {
            if (
                el.classList.contains(`${filter1Value.toLowerCase()}`) &&
                el.classList.contains(`${filter2Value.toLowerCase()}`)
            ) {
                el.style.display = "block";
            } else {
                el.style.display = "none";
            }
        });
    }

    function filterResults() {
        const filter1Value = filter1.value;
        const filter2Value = filter2.value;
        // Get values of additional filters as needed
        filteredList.forEach((el) => {
            if (
                el.classList.contains(`${filter1Value.toLowerCase()}`) &&
                el.classList.contains(`${filter2Value.toLowerCase()}`)
            ) {
                el.style.display = "block";
            } else {
                el.style.display = "none";
            }
        });
    }

2 Replies

MarkBoots•4mo ago

get the classNames of the element in an array, map them to a lowercase value and then do the if statement

filteredList.forEach(el => {
  const classNames = [...el.classList].map(className => className.toLowerCase());
  if(
    classNames.includes(filter1Value.toLowerCase()) &&
    classNames.includes(filter2Value.toLowerCase())
  ){
    ...
  } else {
    ...
  }
})

filteredList.forEach(el => {
  const classNames = [...el.classList].map(className => className.toLowerCase());
  if(
    classNames.includes(filter1Value.toLowerCase()) &&
    classNames.includes(filter2Value.toLowerCase())
  ){
    ...
  } else {
    ...
  }
})

or, just make sure your classnames are already lowercased you can be a bit more fancy and make your own prototype method el.classList.containsAll() so you can reuse it easier

DOMTokenList.prototype.containsAll = function(classNames) {
    if (!Array.isArray(classNames)) classNames = [classNames]
    const classList = [...this].map(name => name.toLowerCase())
    return classNames.every(className => classList.includes(className.toLowerCase()));
};

filteredList.forEach(el => {
  if(el.classList.containsAll(filter1Value, filter2Value)){
    ...
  } else {
    ...
  }
})

DOMTokenList.prototype.containsAll = function(classNames) {
    if (!Array.isArray(classNames)) classNames = [classNames]
    const classList = [...this].map(name => name.toLowerCase())
    return classNames.every(className => classList.includes(className.toLowerCase()));
};

filteredList.forEach(el => {
  if(el.classList.containsAll(filter1Value, filter2Value)){
    ...
  } else {
    ...
  }
})

Aldrin•4mo ago

ok thanks 👍

Gaming

Programming

how to match both the filter value to lower case