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

Question

我正在创建一个简单的待办事项列表。 addEventListener() 应该触发方法addToDo并创建一个新的 div，在其中附加列表。

但是没有触发该方法，也没有添加 div。 尝试了问题和其他问题的解决方案，但它们似乎没有解决问题。

 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

它被触发。 你只是看不到任何变化，因为新创建的todoDiv没有安装在任何地方。

而不是附加到todoDiv尝试附加到todoList 。

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

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