Li element not displaying on screen, vanilla JS todo app-CodePudding

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"  />
          <button  type="submit">
                Add
            </button>
        </form>
        <div class ="todo-container">
           <ul >
    
           </ul>
        </div>
        <script src="./app.js"></script>    
    </body>
    
    </html>

CodePudding user response：

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"  />
  <button  type="submit">
                Add
            </button>
</form>
<div >
  <ul >

  </ul>
</div>

CodePudding user response：

.todo-button does not have submit event, element with submit event is <form>.

Create a class for the <form> element:

<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 >
          <input type="text"  />
          <button  type="submit">
                Add
          </button>
        </form>
        <div class ="todo-container">
           <ul >
    
           </ul>
        </div>
        <script src="./app.js"></script>    
    </body>
    
    </html>