为什么 addEventListener 没有在点击时触发该方法？

Question

I am creating a simple To-Do list. The addEventListener() is supposed to trigger the method addToDo and create a new div inside which the lists are appended.

But the method is not triggered and the div isn't added. Tried the solutions from the question and other questions but they don't seem to fix the problem.

 const todoInput = document.querySelector('.todo-input'); const todoButton = document.querySelector('.todo-button'); const todoList = document.querySelector('.todo-list'); //EventListeners todoButton.addEventListener('click', addToDo, false); //Functions function addToDo(event) { event.preventDefault(); //ToDo Div const todoDiv = document.createElement('div'); todoDiv.classList.add('todo'); //Create <li> const newToDo = document.createElement('li'); newToDo.innerText = 'hey'; newToDo.classList.add('todo-item'); todoDiv.appendChild(newToDo); }

 <form> <input type="text" class="todo-input"> <button class="todo-button" type="submit"> <i class="fas fa-plus-square"></i> </button> </form> <div class="todo-container"> <ul class="todo-list"> </ul> </div>

Answer 1

It is triggered. You just can't see anything changing because newly created todoDiv is not being mounted anywhere.

Instead of appending to todoDiv try appending to todoList .

function addToDo(event) {
    event.preventDefault();

    //Create <li>
    const newToDo = document.createElement('li');
    newToDo.innerText = 'hey';
    newToDo.classList.add('todo-item');
    todoList.appendChild(newToDo);
}