时间戳

首页 > 解决方案 > 为什么我的代码中未定义检查？'纯js'

javascript - 为什么我的代码中未定义检查？'纯js'

问题描述

** 如果选中复选框以在 HTML 元素中添加过滤类但它不起作用并在此行中给我一个未定义的错误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);
});

标签： javascript

解决方案

如果较大的文档修复了所有其他不一致的地方，您应该能够将事件监听器更改为

active_btn.addEventListener("click", function () {
  let check_id = document.querySelector(".complete-txt");

  
  if (check_id.checked !== "true") {
    check_id.parentElement.classList.add("filtered");
  }
});

但！！！这不会“修复”您的所有错误，例如let check在创建复选框之前定义generateTemplate

推荐阅读