Почему так странно работает обработчик событий?
123456789
<body>
<input type="text" class="inputTasks" placeholder="Введите задачу">
<div class="tasks"></div>
<script src="js/script.js"></script>
</body> 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
let tasks = document.querySelector(".tasks");
document.querySelector(".inputTasks").onkeypress = (event) => {
let taskStr = document.querySelector(".inputTasks").value;
if (event.keyCode == 13) {
if (taskStr == "") {
alert("Вы ничего не ввели.");
return;
}
let divTask = document.createElement("div");
divTask.className = "task";
let checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.className = "checkBox";
let trash = document.createElement("div");
trash.className = "trash";
trash.innerHTML = "🗑️";
let task = document.createElement("div");
task.className = "taskName";
task.innerHTML = taskStr;
divTask.appendChild(checkBox);
divTask.appendChild(task);
divTask.appendChild(trash);
tasks.appendChild(divTask);
checkBox.addEventListener('change', event => {
if (checkBox.checked) {
task.classList.add("complete");
}
else {
task.classList.remove("complete");
}
});
trash.addEventListener('click', event => {
if (confirm("Вы точно хотите удалить задачу: " + taskStr + " ?")) {
divTask.remove();
}
});
}
} 123456789101112131415161718192021222324252627282930313233
.task {
display: flex;
justify-content: start;
}
.inputTasks {
margin-left: auto;
margin-right: auto;
}
.complete {
text-decoration: line-through;
}
.trash {
cursor: pointer;
}
У меня есть приложение списка дел, у меня появился вопрос - почему через
1
addEventListener у меня работает удаление записи, но если вместо него я вставлю
1
document.querySelector(".trash").onclick => () {код для удаления} То он не сработает?
Только авторизированные пользователи могут оставлять свои ответы
Дата
Популярность
Потому, что так правильно:
document.querySelector(".trash").onclick = function (event) {код для удаления}
И так правильно:
document.querySelector(".trash").onclick = event => {код для удаления}
А так - синтаксическая ошибка:
document.querySelector(".trash").onclick => () {код для удаления}
Почитай про стрелочные функции - https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Больше по теме