Uncaught TypeError: не удалось выполнить «содержит» на «узле»: параметр 1 не имеет типа «узел». в HTMLUListElement.<анонимно>

const icon = `<div class = "container">
  <input type = "checkbox" id = "cbx2" style = "display: none;">
  <label for = "cbx2" class = "check">
      <svg width = "1.5rem" height = "1.5rem" viewBox = "0 0 25 25">
          <path d = "M 1 9 L 1 9 c 0 -5 3 -8 8 -8 L 9 1 C 14 1 17 5 17 9 L 17 9 c 0 4 -4 8 -8 8 L 9 17 C 5 17 1 14 1 9 L 1 9 Z"></path>
          <polyline points = "1 9 7 14 15 4"></polyline>
      </svg>
  </label>
</div>`
  li.innerHTML += icon

    todoUl.addEventListener("click", (e) => {
  const idAttr = e.target.closest("li").getAttribute("id")

  if (e.target.contains("check")) {
    e.target.parentElement.classList.toggle("checked")
    localStorage.setItem("todoList", JSON.stringify(todoList))
  } else if (e.target.classList.contains("fa-trash")) {
    e.target.parentElement.remove()
    todoList = todoList.filter((todo) => todo.id != idAttr)
    localStorage.setItem("todoList", JSON.stringify(todoList))
  }
})
# app.js:97 Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.
#   at HTMLUListElement.<anonymous>

Я получаю эту ошибку, для этого нужно очень простое изменение, но я не мог понять это. Я хочу, чтобы отмеченная кнопка сохранялась в localStorage, и если задача завершится, я хочу, чтобы она работала, но когда я обновляю страницу, она возвращается в исходное состояние.

Вы забыли .classList. Node.prototype.contains не является DOMTokenList.prototype.contains. Не проверяйте класс самого целевого элемента при делегировании события; вместо этого используйте e.target.closest(".check") и e.target.closest(".fa-trash").

Sebastian Simon 10.02.2023 14:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Node.contains() — это API, который принимает Node и проверяет, существует ли он в тестере. Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

ваша проблема использует этот код:

todoUl.addEventListener("click", (e) => {
  const idAttr = e.target.closest("li").getAttribute("id")

  if (e.target.classList.contains("check")) {
    e.target.parentElement.classList.toggle("checked")
    localStorage.setItem("todoList", JSON.stringify(todoList))
  } else if (e.target.classList.contains("fa-trash")) {
    e.target.parentElement.remove()
    todoList = todoList.filter((todo) => todo.id != idAttr)
    localStorage.setItem("todoList", JSON.stringify(todoList))
  }
})

обратите внимание, что я не уверен, что этот код работает, потому что в нем отсутствует информация о вашем html

Tachibana Shin 10.02.2023 14:54

Другие вопросы по теме

Похожие вопросы