Что необходимо исправить в JS?

Question

Написал (почти сам) Todo. Через prepros и "go live" все работает, задачи создаются и удаляются. Если открывать html через проводник, задачи не создаются. Как исправить ситуацию? Не могу понять

В консоли разработчика следующая ошибка:

Uncaught TypeError: tasks.filter is not a function    main.js:32
at filterTasks (main.js:32:44)
at fillHtmlList (main.js:40:3)
at main.js:52:1

Вот код JS:

const addTaskBtn = document.getElementById('add-task-btn');
const deskTuskInput = document.getElementById('description-task');

const todoWrapper = document.querySelector('.downTodoBlock');

let tasks;

!localStorage.tasks ? tasks = [] : tasks = JSON.parse(localStorage.getItem('tasks'));
let todoItemsElems = [];

function Task(description) {
    this.description = description;
    this.completed = false;
}

const createTemplate = (task, index) => {
    return `
        <div class="todo__item ${task.completed ? 'checked' : ''}">
            <div class="description">${task.description}</div>
            <div class="buttons">
                <input onclick="completeTask(${index})" class="btn__complete" type="checkbox" ${task.completed ? 'checked' : ''}>
                <button onclick="deleteTask(${index})" class="btn__delete">Delete</button>
            </div>
        </div>
    `
}


const filterTasks = () => {
    const activeTasks = tasks.length && tasks.filter(item => item.completed == false);
    const completedTasks = tasks.length && tasks.filter(item => item.completed == true);
    tasks = [...activeTasks, ...completedTasks];
}

const fillHtmlList = () => {
    todoWrapper.innerHTML = "";
    if (tasks.length > 0) {
        filterTasks();
        tasks.forEach((item, index) => {
            todoWrapper.innerHTML += createTemplate(item, index);
        });
        todoItemsElems = document.querySelectorAll('.todo__item');
    }
}

fillHtmlList();

const updateLocal = () => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

const completeTask = index => {
    // console.log(index);
    tasks[index].completed = !tasks[index].completed;
    if (tasks[index].completed) {
        todoItemsElems[index].classList.add('checked');
    } else {
        todoItemsElems[index].classList.remove('checked');
    };

    updateLocal();
    fillHtmlList();
}

addTaskBtn.addEventListener('click', () => {
    tasks.push(new Task(deskTuskInput.value));
    // console.log(tasks);
    updateLocal();
    fillHtmlList();
    deskTuskInput.value = '';
})

const deleteTask = index => {
    todoItemsElems[index].classList.add('delition');
    setTimeout(() => {
        tasks.splice(index, 1);
        updateLocal();
        fillHtmlList();
    }, 500)
}

HTML:

    <!DOCTYPE html>
    <html lang="ru">
    <head>
        <title>ToDo на чистом JS</title>
        <link rel="stylesheet" href="css/style.css" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    
    </head>
    
    <body>
        <div class="wrapper">
            <h1>ToDo Лист</h1>
            <div class="flex-wrapper">
                <div class="container">
                    <div class="add-todo-wrapper">
                        <div class="input-wrapper">
                            <input type="text" id="description-task">
                        </div>
                        <div class="button__wrapper">
                            <button id="add-task-btn">Добавить</button>
                        </div>
                    </div>
                    <h2>Задачи на день:</h2>
                    <div class="downTodoBlock">
                    </div>
                </div>
            </div>
        </div>
        </div>
    
        <script src="js/main.js"></script>
    </body>
    
    </html>

Answer 1

Я скопировал ваш код и у меня нет ошибок, возможно у вас уже в localStorage.tasks что то лежит, очистите localStorage

Я сейчас ввёл localStorage.tasks = 1 в консоль и всё сломалось. Очистите localStorage.tasks

БЛОГ НА HUSL

Что необходимо исправить в JS?

Ответы (1 шт):