0

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>

1 ответ 1

0
if (data) {
    task.innerHTML = data;
}

В innerHTML нет слушателей событий. Вам нужно пройти по кнопкам/элементам и подсоединить обработчики.

1
  • Спасибо за ответ! не получается реализовать( 24 дек 2021 в 14:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.