Кнопка при нажатии не работает до перезагрузки страницы
У меня есть очень маленькое приложение, которое добавляет задачи на страницу и сохраняет их в локальном хранилище, поэтому, если я перезагружу страницу или закрою ее, все будет на своем месте, проблема в созданных задачах. У меня есть кнопка удаления, эта кнопка удаляет задача из localstorage и dom, но мне нужно сначала перезагрузить страницу. Вот как выглядит приложение
Я хочу: могу ли я удалить задачи без перезагрузки страницы?
Полный js-код:
let myForm = document.getElementsByTagName("form")[0];
let input = document.getElementById("only");
let submit = document.getElementById("btn");
let resDiv = document.getElementsByClassName("tasks")[0];
function id () {
return '_' + Math.random().toString(36).substr(2, 9);
}
if (window.localStorage.tasks) {
for (let i = 0; i < JSON.parse(window.localStorage.tasks).length; i++) {
let myDiv = document.createElement("div");
let text = document.createTextNode(
JSON.parse(window.localStorage.tasks)[i].title
);
let del = document.createElement("button");
let delText = document.createTextNode("Delete");
del.append(delText);
del.className = "del";
del.dataset.id = JSON.parse(window.localStorage.tasks)[i].id;
myDiv.className = "myDiv";
myDiv.append(text, del);
resDiv.append(myDiv);
}
}
myForm.onsubmit = function (e) {
if (input.value !== "") {
let myDiv = document.createElement("div");
let text = document.createTextNode(input.value);
let del = document.createElement("button");
let delText = document.createTextNode("Delete");
del.append(delText);
del.className = "del";
del.dataset.id = id();
myDiv.className = "myDiv";
myDiv.append(text, del);
resDiv.append(myDiv);
let push = JSON.parse(window.localStorage.getItem("tasks")) || [];
push.push({ id: del.dataset.id, title: input.value });
window.localStorage.setItem("tasks", JSON.stringify(push));
}
e.preventDefault();
};
let tasksArray = JSON.parse(window.localStorage.tasks);
resDiv.addEventListener("click", function (e) {
for (let j = 0; j < tasksArray.length; j++) {
if ( e.target.dataset.id === tasksArray[j].id) {
tasksArray.splice(tasksArray.indexOf(tasksArray[j]), 1);
window.localStorage.setItem("tasks", JSON.stringify(tasksArray));
e.target.parentElement.remove();
}
}
});
HTML:
<form action = "">
<input type = "text" name = "" id = "only" />
<input type = "submit" value = "Add Tasks" id = "btn" />
</form>
<div class = "tasks"></div>
Примечание. Я новичок в javaScript, надеюсь, вы поймете, если я сделал несколько глупых ошибок ^_^. Спасибо за попытку помочь: D простите мою грамматику.
Я вижу, что оба кода будут работать довольно хорошо, что вам нужно сделать, чтобы добиться этого, просто добавьте document.getelementbyid("your div id"). remove() вместо e.target.parentElement.remove();, что должно работать
еще лучшим решением является очистка атрибута innerhtml родительского элемента, который вы хотите удалить.
@NikhilSingh Пожалуйста, проверьте мой HTML-код, добавленный выше, как вы можете видеть, у меня есть «задачи» div.className, здесь создаются мои задачи, поэтому у меня есть div, и каждый раз, когда я добавляю задачу, я создаю другой div внутри этого, значение из поля ввода и кнопки удаления, поэтому мой код удаления делает следующее: когда я нажимаю «Удалить», он удаляет div, созданный внутри div задач, но только если страница перезагружается
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы не определили myForm, и форма не имеет селектора. Форма также не имеет установленного имени, поэтому, если она все же отправится на сервер, то не сможет ничего прочитать. Форматирование вашего кода также очень странное, я бы порекомендовал запустить его через улучшитель, например FreeFormatter, чтобы его было легче читать и редактировать. Приведенный ниже код устраняет все проблемы, кроме последней, которую следует выполнить во всем коде.
const myForm = document.getElementById('myForm');
myForm.onsubmit = function (e) {
if (input.value !== "") {
let myDiv = document.createElement("div");
let text = document.createTextNode(input.value);
let del = document.createElement("button");
let delText = document.createTextNode("Delete");
del.append(delText);
del.className = "del";
del.dataset.id = id();
myDiv.className = "myDiv";
myDiv.append(text, del);
resDiv.append(myDiv);
let push = JSON.parse(window.localStorage.getItem("tasks")) || [];
push.push({ id: del.dataset.id, title: input.value });
window.localStorage.setItem("tasks", JSON.stringify(push));
}
e.preventDefault();
}; <form action = "/to/page.php" method = "either put GET or POST here" id = "myForm">
<input type = "text" name = "tasks" id = "only" />
<input type = "submit" value = "Add Tasks" id = "btn" />
</form>Я бы порекомендовал просмотреть некоторые учебные пособия и документацию по Javascript из:
MDN (документы Mozilla Developer Network)
В w3schools иногда бывают проблемы, но это один из самых простых способов научиться программировать.
Иногда DevDocs может быть полезен
Примечание. Если страница, на которую будет переходить форма, является той же страницей, вам следует изменить расширение файла на PHP с HTML (для этого вам понадобится веб-сервер или серверное программное обеспечение, такое как xampp), и вы должны заменить action = "/to/page.php" на action = "<?php echo $_SERVER['PHP_SELF']; ?>".
Для удаления, вам следует принудительно перезагрузить страницу или использовать e.innerHTML = ''; или e.style.display = 'none'; в функции для удаления задачи.
Ваш код очень трудно читать. Итак, я закончил тем, что переписал все это, используя хорошие соглашения и приемы, которые вы можете использовать в будущем. Делать записи :)
Я предполагаю, что вы отвечаете за код, который назначает идентификаторы, которые вы нам не дали. Поэтому я сделал один специально для этого примера.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id = "my-form" action = "">
<input type = "text" name = "" id = "input-box" />
<input type = "submit" value = "Add Tasks" id = "submit-button" />
</form>
<div id = "task-list" class = "tasks"></div>
<script>
const myForm = document.getElementById("my-form");
const inputBox = document.getElementById("input-box");
const taskList = document.getElementById("task-list");
// Assuming your are handling this function.
// You can ignore this part
function Id() {
const uid =
new Date().toISOString().replaceAll(/[-:TZ]/g, ".") +
Math.random().toString().substring(2, 7);
return uid.split(".").join("");
}
// Set the tasks everytime the application is refreshed
window.onload = function () {
// The tasks in your local storage. Local storage stores data in string
// only so you need to use JSON.parse to convert it into readable array
// I'm also setting the default value to [] in case javascript cannot find
// the tasks
const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
tasks.forEach(({ id, title }) => {
// Reusable renderTasks function to render the tasks
const task = renderTasks(id, title);
taskList.append(task);
});
};
// Reusable function to render the tasks.
function renderTasks(id, title) {
const taskParent = document.createElement("div");
taskParent.style.display = "flex";
taskParent.id = id;
const taskTitle = document.createElement("p");
taskTitle.innerText = title;
// You don't need to set Id's in your case. You can just assign a
// function to the delete button and remove the parent within the
// functon itself
const deleteButton = document.createElement("button");
deleteButton.innerText = "DELETE";
deleteButton.onclick = function () {
const tasks = JSON.parse(localStorage.getItem("tasks"));
taskParent.remove();
// Array filter. Return a new list without the deleted task
const newTaskList = tasks.filter((task) => task.id !== id);
localStorage.setItem("tasks", JSON.stringify(newTaskList));
};
// I'm using append because with appendChild you can't append more than
// 2 html elements at the same time
taskParent.append(taskTitle, deleteButton);
return taskParent;
}
// 1. render the task
// 2. Append the task to the list
// 3. Set the title in the localStorage
myForm.onsubmit = function (e) {
e.preventDefault();
const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
const id = Id();
const title = inputBox.value;
const task = renderTasks(id, title);
taskList.append(task);
localStorage.setItem(
"tasks",
JSON.stringify([...tasks, { id, title }])
);
};
</script>
</body>
</html>
Подробнее о фильтре: Массив.прототип.фильтр()
Привет и добро пожаловать в StackOverflow! Пожалуйста, опубликуйте свой HTML-код вместе с остальным кодом, чтобы людям было легче понять полную картину.