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, и если задача завершится, я хочу, чтобы она работала, но когда я обновляю страницу, она возвращается в исходное состояние.
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
Вы забыли
.classList
. Node.prototype.contains не является DOMTokenList.prototype.contains. Не проверяйте класс самого целевого элемента при делегировании события; вместо этого используйтеe.target.closest(".check")
иe.target.closest(".fa-trash")
.