При клике на кнопку save все работает как надо и сохраняет в локальное хранилище,
но после обновления страницы я не могу удалить задачи по нажатию на кнопку внутри, а так же вычеркнуть.
Помогите решить проблему.
const button = document.querySelector('.btn-1');
const input = document.querySelector('.todo_input');
const task = document.querySelector('.task')
const btnSave = document.querySelector('.btn__save')
const ClearBtn = document.querySelector('.btn__clear')
function loadTodos() {
const data = localStorage.getItem('task')
if (data) {
task.innerHTML = data;
}
}
//////////////////// listenners ///////////////
button.addEventListener('click', function addTask() {
if (input.value === '') {
alert('Write a task')
} else {
createEl()
input.value = ''
}
})
btnSave.addEventListener('click', function Save() {
localStorage.setItem('task', task.innerHTML)
})
ClearBtn.addEventListener('click', function Clear() {
task.innerHTML = ''
localStorage.removeItem('task', task)
})
input.addEventListener('keypress', function pressEnter(e) {
if (e.key === 'Enter') {
if (input.value === '') {
alert('Write a task')
} else {
createEl()
input.value = ''
}
}
});
window.addEventListener('load', loadTodos)
///////////////////////////////////////////////
function createEl() {
let li = document.createElement('li')
let b1 = document.createElement('button')
li.className = 'case';
li.textContent = input.value;
b1.className = 'btn';
b1.innerHTML = '';
task.appendChild(li);
li.appendChild(b1);
ClearBtn.addEventListener('click', function Clear() {
li.innerHTML = ''
localStorage.removeItem('task', task)
})
b1.addEventListener('click', () => {
task.removeChild(li)
})
li.addEventListener('click', () => {
li.classList.toggle('case-active')
})
}
//////
<!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>To Do List</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,700&family=Poppins:wght@300;400;500;600&family=Rubik:wght@400;500;600&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<h1>
To Do List
</h1>
</header>
<div class="container">
<div class="todo_block">
<input class="todo_input" type="text" name="text" placeholder="write here...">
<ul class="task"></ul>
</div>
<div class="btn-div">
<button class="btn-1">Add</button>
</div>
<div class="buts">
<button class="btn__save">Save</button>
<button class="btn__clear">Clear</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
b1.addEventListener('click', () => {const tasks = [
{text: "Заварить кофе", isDone: false},
{text: "Пожарить яичницу", isDone: false},
{text: "продрать глаза", isDone: true},
];const itemKey = 'tasks';
localStorage.setItem(itemKey, JSON.stringify(tasks));
Средний
Средний