** I want when to click on the active button if the checkbox is checked to add filtered class in HTML element but it doesn't work and give me an undefined error in this line check.parentElement.classList.add("filtered"); **

        <ul class="ul-list"></ul>
      </section>
    </main>
    <footer class="footer">
      <button class="all footer-btn">All</button>
      <button class="active footer-btn">Active</button>
      <button class="complete footer-btn">Complete</button>
    </footer>

let check = document.querySelectorAll(".complete-txt");
let complete_btn = document.querySelector(".complete");
let active_btn = document.querySelector(".active");
let all_btn = document.querySelector(".all");
let edit_list = document.querySelector(".edit-list");
let main_text = document.querySelector(".main-text");
let list_item = document.querySelector(".list-item");
let footer = document.querySelector(".footer");

const generateTemplate = (todo) => {
  const html = `
  <li class="list-item">
  <input type="checkbox" class="complete-txt"  name="" id="check"><span class="main-text">${todo}</span><div class="edit-list"></div><div class="delete-list"></div>
</li>
  `;
  list.innerHTML += html;
};

// add todos event
addForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const todo = addForm.add.value.trim();

  if (todo.length) {
    generateTemplate(todo);
    addForm.reset();
  }
});

active_btn.addEventListener("click", function () {
  let check_id = document.querySelector(".complete-txt");
  // check.forEach(function () {
  debugger;
  if (check.checked !== "true") {
    check.parentElement.classList.add("filtered");
    console.log("hi");
  }
  // });
  // console.log("hi");
  console.log("hi");
  // console.log(check.checked.value);
});