Recibo el siguiente error en mi lista de tareas pendientes: Error no detectado todoDiv no definido. Soy muy nuevo en esto y estoy siguiendo un tutorial para crear una lista de tareas pendientes. En la parte superior de mi secuencia de comandos, se crea el elemento "todoDiv" y luego se usa para agregarlo, luego intento agregar todoDiv y me dice que no está definido. ¿Cómo soluciono esto para poder seguir adelante?
//selectors const todoInput = document.querySelector(".todo-input"); const todoButton = document.querySelector(".todo-button"); const todoList = document.querySelector(".todo-list"); //event listener todoButton.addEventListener('click', addTodo); //functions function addTodo(event) { //prevent form from submitting 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); //checkmark button const completedButton = document.createElement('button'); completedButton.innerHTML = '<i class ="fas fa-check"></i>'; completedButton.classList.add('complete-btn'); todoDiv.appendChild(completedButton); //trashButton const trashButton = document.createElement('button'); trashButton.innerHTML = '<i class ="fas fa-trash"></i>'; trashButton.classList.add('complete-btn'); todoDiv.appendChild(trashButton); } //append to list todoList.appendChild(todoDiv); <Header> <h1>Heathers to do list</h1> </Header> <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>