Блог

Главная - Вопросы по программированию - почему проверка не определена в моем коде? «чистый js»

почему проверка не определена в моем коде? «чистый js»

#javascript

Вопрос:

** Я хочу, когда нажать на активную кнопку, если установлен флажок для добавления отфильтрованного класса в HTML-элемент, но он не работает и выдает мне неопределенную ошибку в этой строке check.parentElement.classList.add(«отфильтрован»); **

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

Комментарии:

1. querySelectorAll(".complete-txt") возвращает список узлов, которого в этом списке нет parentElement , ошибка возникает, когда вы пытаетесь ссылаться classList undefined .

2. я использую querySelector («.complete-txt») или getElementById, но он не работает

3. существует множество ошибок, «проверка» определена до создания DOM, для onclick active_btn вы определяете «check_id», но используете вышеупомянутую неопределенную «проверку». вы также добавляете флажок в «список», который вы не определили

Ответ №1:

если в более крупном документе исправлены все другие несоответствия, вы сможете изменить список событий на

 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

Метки: