Помогите сделать сохранение в списке задач на js

Question

Помогите сделать сохранение в списке задач на js

Максим Трушин Гуру (2635), на голосовании 11 месяцев назад

Сделал список с возможностью удаления и сохранения. При обновление страницы всё сохраняется, но только кнопка "Удалить" смешивается с самой задачей, помогите исправить

Код предоставляю ниже:

<!DOCTYPE html>
<html>
<head>
<title>Список задач</title>
<style>
ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

button {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>Список задач</h1>
<input type="text" id="taskInput" placeholder="Введите задачу">
<button onclick="addTask()">Добавить задачу</button>
<ul id="taskList"></ul>

<script>
// Загрузка сохраненных задач при загрузке страницы
window.onload = function() {
const tasks = JSON.parse(localStorage.getItem("tasks")) || [];

for (const taskText of tasks) {
addTaskToList(taskText);
}
};

// Добавление новой задачи в список
function addTask() {
const taskInput = document.getElementById("taskInput");
const taskText = taskInput.value;

if (taskText !== "") {
addTaskToList(taskText);
saveTasks();
taskInput.value = "";
}
}

// Добавление задачи в список
function addTaskToList(taskText) {
const taskList = document.getElementById("taskList");
const task = document.createElement("li");
task.innerText = taskText;

const deleteButton = document.createElement("button");
deleteButton.innerText = "Удалить";
deleteButton.onclick = function() {
task.parentNode.removeChild(task);
saveTasks();
};

task.appendChild(deleteButton);
taskList.appendChild(task);
}

// Сохранение задач в localStorage
function saveTasks() {
const tasks = [];
const taskList = document.getElementById("taskList");
const tasksElements = taskList.getElementsByTagName("li");

for (const taskElement of tasksElements) {
tasks.push(taskElement.innerText);
}

localStorage.setItem("tasks", JSON.stringify(tasks));
}
</script>
</body>

Answer 1

Проверяй сам. Просто очищается стор при обновлении..

  
 
 
  Список задач 
   
 
 
  Список задач