set ptoperties of null

24 views Asked by At
const todos = [];

// selecting :

const todoInput = document.querySelector(".todo-input");
const todoForm = document.querySelector(".todo-form");
const todoList = document.querySelector(".todoList");
const selectFilter = document.querySelector(".filter-todos");

// events

todoForm.addEventListener("submit",addNewTodo);
selectFilter.addEventListener("change", filterTodos);

// functions

function addNewTodo(e) {
    e.preventDefault();

    if (!todoInput.value) return null;

    const newTodo = {
        id: Date.now(),
        createdAt: new Date().toISOString(),
        title: todoInput.value,
        isCompleted: false,
    };

    todos.push(newTodo);
    createTodos(todos);

// create todos in DOM
    todoList.innerHTML = result;
    todoInput.value = "";
}

let result = "";
function createTodos(todos) {
    todos.forEach((todo) => {
        result+=`<li class="todo">
        <p class="todo__title">${todo.title}</p>
        <span class="todo__createdAt">${new Date(todo.createdAt).toLocaleDateString}</span>
        <button data-todo-id="${todo.id}><i class="todo__check far fa-check-square"></i></button>
        <button data-todo-id="${todo.id}><i class="todo__remove far fa-trash-alt"></i></button>
      </li>`;
    });
};

function filterTodos(e) {
    const filter = e.target.value;
    
    switch (filter) {
        case "all" : {
            createTodos(todos);
            break;
        }
        case "completed" : {
            const filteredTodos = todos.filter(t => t.isCompleted);
            createTodos(filteredTodos);
            break;
        }
        case "uncompleted" : {
            const filteredTodos = todos.filter(t => !t.isCompleted);
            createTodos(filteredTodos);
            break;
        }
        default:
            createTodos(todos);
    }
}
type here

my program wont work and gives me this error ,Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at HTMLFormElement.addNewTodo (todo.js:33:24)

i tried chat-GPT and wasnt helpful

i tried declaring 'result' variable in foreach or outside of 'addNewTodo' function and didnt help

0

There are 0 answers