** Quiero cuándo hacer clic en el botón activo si la casilla de verificación está marcada para agregar una clase filtrada en el elemento HTML pero no funciona y me da un error indefinido en esta línea check.parentElement.classList.add ("filtrado") ; **

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