0

Выводит [object Object] в списке между перезагрузкой страницы,подскажите,как корректнее можно задействовать localStorage, либо как мне можно подправить мой код для правильной работы моего приложения.

(function(){
    // создаём и возвращаем заголовок приложения
    function createAppTitle(title){
        let appTitle = document.createElement('h2')
        appTitle.innerHTML = title
        return appTitle 
    }

    // создаём и возвращаем форму для создания дела
    function createTodoItemForm(){
        let form = document.createElement('form')
        let input = document.createElement('input')
        let buttonWrapper = document.createElement('div')
        let button = document.createElement('button')

        form.classList.add('input-group', 'mb-3')
        input.classList.add('form-control')
        input.placeholder = 'Введите название нового дела'
        buttonWrapper.classList.add('input-group-append')
        button.classList.add('btn', 'btn-primary')
        button.textContent = 'Добавить дело'
        button.disabled = true

        buttonWrapper.append(button)
        form.append(input)
        form.append(buttonWrapper)
        
        input.addEventListener('input', function(e) {
            e.preventDefault();
            if(input.value.length>0){
                button.disabled = false
            }if(input.value.length==0) button.disabled = true
             });

        return{
            form,
            input,
            button,
        }
    }

    // создаём и возвращаем список элементов
    function createTodoList(){
        let list = document.createElement('ul')
        list.classList.add('list-group')
        return list;
    }

    function createTodoItem(name){
        let item = document.createElement('li');
        // кнопки помещаем в элемент, который красиво покажет их в одной группе
        let buttonGroup = document.createElement('div')
        let doneButton = document.createElement('button')
        let deleteButton = document.createElement('button')
        
        //устанавливаем стили, а также для размещения кнопок
        // в его правой части с помощью flex
        item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center')
        item.textContent = name


        buttonGroup.classList.add('btn-group', 'btn-group-sm')
        doneButton.classList.add('btn', 'btn-success')
        doneButton.textContent = 'Готово'
        deleteButton.classList.add('btn', 'btn-danger')
        deleteButton.textContent = 'Удалить'

        // вкладываем кнопки в отдельный элемент, чтобы они объединились в один блок
        buttonGroup.append(doneButton)
        buttonGroup.append(deleteButton)
        item.append(buttonGroup)

        //приложению нужен доступ к самому элементу и кнопкам, чтобы они объединились в один блок
        return{
            item,
            doneButton,
            deleteButton,
        }
    }

    function createTodoApp(container, title, todoItemsDefault, key){
        let todoAppTitle = createAppTitle(title)
        let todoItemForm = createTodoItemForm()
        let todoList = createTodoList()

        if (localStorage.getItem(key) !== null) {
        let todoItem = createTodoItem(JSON.parse(localStorage.getItem(key)))
        todoList.append(todoItem)
        todoItem.doneButton.addEventListener('click', function(){
            todoItem.item.classList.toggle('list-group-item-success')
        })
        todoItem.deleteButton.addEventListener('click', function(){
            if(confirm('Вы уверены?')){
                todoItem.item.remove()
            }
        })
      }

         if(todoItemsDefault){
            todoItemsDefault.map(item=>{
                let todoItem = createTodoItem(item.name)
                todoList.append(todoItem.item)
                todoItem.doneButton.addEventListener('click', function(){
                   todoItem.item.classList.toggle('list-group-item-success')
               })
               todoItem.deleteButton.addEventListener('click', function(){
                   if(confirm('Вы уверены?')){
                       todoItem.item.remove()
                   }
               })
                if(item.done){
                    todoItem.item.classList.add('list-group-item-success')
                }
            })
         }

        container.append(todoAppTitle)
        container.append(todoItemForm.form)
        container.append(todoList)

        todoItemForm.form.addEventListener('submit', function(e){
            // чтобы страница не перезагружалась
            e.preventDefault();
            if(!todoItemForm.input.value){
                 return 
            }
            
            let todoItem = createTodoItem(todoItemForm.input.value)
            localStorage.setItem(key, JSON.stringify(todoItemForm.input.value))
            
           // добавляем обработчики на кнопки 
            todoItem.doneButton.addEventListener('click', function(){
                todoItem.item.classList.toggle('list-group-item-success')
                
            })
            todoItem.deleteButton.addEventListener('click', function(){
                if(confirm('Вы уверены?')){
                    todoItem.item.remove()
                    localStorage.removeItem(key)
                }
            })
            // создаем и добавляем новое дело с названием из поля для ввода
            todoList.append(todoItem.item)
            
            // выставляем кнопке disabled
            todoItemForm.button.disabled = true
            // обнуляем значение в поле, чтобы не пришлось стирать его из поля для ввода
            todoItemForm.input.value = ''
            
        }) 
    }
    window.createTodoApp = createTodoApp
})();
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>TODO</title>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    <script defer src="todo-app.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            createTodoApp(document.getElementById('todo-app'), 'Мои дела',[
        {name: 'Сходить в магазин', done: true},
        {name: 'Купить хлеб', done: true},
     ],'myKey')
        })
    </script>
  </head>
  <body>
      <div class="container mb-5">
          <nav class="nav">
              <a class="nav-link" href="index.html">Мои дела</a>
              <a class="nav-link" href="dad.html">Дела для папы</a>
              <a class="nav-link" href="mom.html">Дела для мамы</a>
          </nav>
      </div>
    <div id="todo-app" class="container"></div>
  </body>
</html>

1 ответ 1

1
 let todoItem = createTodoItem(JSON.parse(localStorage.getItem(key)));

Эта функция возвращает вам объект с полями item, doneButton, deleteButton.

А на следующей строке вы добавляете списку этот объект, а не элемент:

 todoList.append(todoItem);

Нужно так:

todoList.append(todoItem.item)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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