@Andrii-debug

Как подсоединить обработчики к данным которые я вывожу из localstorage?

При клике на кнопку 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>
  • Вопрос задан
  • 153 просмотра
Решения вопроса 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
Ответ на поставленный вопрос «Почему?» — потому, что из LocalStorage вытаскиваете HTML разметку и вставляете её, но слушатели событий к элементам не привязаны. Только при создании новой задачи у вас срабатывает b1.addEventListener('click', () => {

Стоит разделять данные и их отображение.
У todo приложения данные – это массив задач. Данные сохраняются в LS. Задача, минимально, это строка текста.
Текстовое поле, кнопка для удаления — это всё уже мишура, отображение. Генерится динамически из данных.

Три штуки в этом приложении:
  1. массив с задачами (задача просто строка, что там ввел юзер)
  2. отрисовка интерфейса из массива
  3. изменение массива через действия в интерфейсе
И работают они по кругу )

Что-то изменили – изменился массив – отрисовалось с нуля заново всё, как при первой загрузке.
Так не накосячите со слушателями событий, в том числе.
Но придётся усложнить данные: не просто строки, ещё и состояние выполнено/не_выполнено.

К примеру, можно так держать данные:
const tasks = [
  {text: "Заварить кофе", isDone: false},
  {text: "Пожарить яичницу", isDone: false},
  {text: "продрать глаза", isDone: true},
];
Сохранять в LS сериализованный в JSON этот массив:
const itemKey = 'tasks';
localStorage.setItem(itemKey, JSON.stringify(tasks));
Ответ написан
Комментировать
Simkav
@Simkav
Так происходит потому что вы вешаете обработчик на кнопку только при создании таски, в момент загрузки тасок из сторейджа никакх обработчиков вы не навешиваете
P.s. зачем хранить целый кусок HTML в сторейдже если они одинаковые, и можно хранить только сам текст тудушки
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы