I am getting the following error in my todo list : Uncaught error todoDiv not defined. I am very new to this and am following a tutorial to build a todo list. At the top of my script "todoDiv" element is created then used to append throughout then I try to append todoDiv and it tells me its undefined. How do I fix this so I can move forward?
//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>