I hope if someone could help me. I am working on creating a simple to do list. I am creating and appending li to ul but not is being displayed. I would appreciate if someone has the time to explain me what I am doing wrong.
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const addTodoItem =(e) => {
e.preventDefault(); //prevent default behavior of submitting the form when clicked
const todoDiv = document.createElement('div'); //Create div to hold list and delete button
const todoLi = document.createElement('li'); //create li
todoLi.innerText = todoInput.value; //give it value from user's input
todoDiv.appendChild(todoLi); //append li to div holding it
todoInput.value = ''; //clear form after adding input to list
const deleteBtn = document.createElement('button'); //create delete btn
todoDiv.appendChild(deleteBtn); //append delete bth to div holding it
todoList.appendChild(todoDiv); //appned div to todos
}
//add event listener to add button
todoButton.addEventListener('submit', addTodoItem);
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyTodo</title>
</head>
<body>
<h1> To do List</h1>
<form >
<input type="text" class="todo-input" />
<button class="todo-button" type="submit">
Add
</button>
</form>
<div class ="todo-container">
<ul class="todo-list">
</ul>
</div>
<script src="./app.js"></script>
</body>
</html>
The issue is you're applying a submit listener to a button, which doesn't have a submit event. The FORM does have a submit event, and would work perfectly with your preventDefault line.
document.querySelector('form').addEventListener('submit', addTodoItem);
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const addTodoItem = (e) => {
e.preventDefault(); //prevent default behavior of submitting the form when clicked
const todoDiv = document.createElement('div'); //Create div to hold list and delete button
const todoLi = document.createElement('li'); //create li
todoLi.innerText = todoInput.value; //give it value from user's input
todoDiv.appendChild(todoLi); //append li to div holding it
todoInput.value = ''; //clear form after adding input to list
const deleteBtn = document.createElement('button'); //create delete btn
todoDiv.appendChild(deleteBtn); //append delete bth to div holding it
todoList.appendChild(todoDiv); //appned div to todos
}
//add event listener to add button
document.querySelector('form').addEventListener('submit', addTodoItem);<h1> To do List</h1>
<form>
<input type="text" class="todo-input" />
<button class="todo-button" type="submit">
Add
</button>
</form>
<div class="todo-container">
<ul class="todo-list">
</ul>
</div>.todo-button does not have submit event, element with submit event is <form>.
Create a class for the <form> element:
<form class="todo-form">
Create a variable for the form:
const todoForm = document.querySelector(".todo-form");
Then add event listener to it:
todoForm.addEventListener('submit', addTodoItem);
Full code:
const todoForm = document.querySelector(".todo-form");
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const addTodoItem = (e) => {
e.preventDefault(); //prevent default behavior of submitting the form when clicked
const todoDiv = document.createElement('div'); //Create div to hold list and delete button
const todoLi = document.createElement('li'); //create li
todoLi.innerText = todoInput.value; //give it value from user's input
todoDiv.appendChild(todoLi); //append li to div holding it
todoInput.value = ''; //clear form after adding input to list
const deleteBtn = document.createElement('button'); //create delete btn
todoDiv.appendChild(deleteBtn); //append delete bth to div holding it
todoList.appendChild(todoDiv); //appned div to todos
}
//add event listener to add button
todoForm.addEventListener('submit', addTodoItem);
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyTodo</title>
</head>
<body>
<h1> To do List</h1>
<form class="todo-form">
<input type="text" class="todo-input" />
<button class="todo-button" type="submit">
Add
</button>
</form>
<div class ="todo-container">
<ul class="todo-list">
</ul>
</div>
<script src="./app.js"></script>
</body>
</html>