https://andrii-debug.github.io/To-Do-List/
В ToDo после сохранения с помощью кнопки save в localstorage и обновлении страницы, не работают кнопки удаления в li. До обновления страницы все работает как надо, но если обновить то элементы списка не реагируют. Помогите!
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>