Question 243191 in Html Question posted in
Some basic documentation can be found here.

Html – Items not being added to task list on todolist

I’m currently building a to do list and having trouble adding to the list. I feel like everything should work but when write in the add task bar and then press add task nothing appears in the task list.

the current .js file

window.addEventListener ('load', () => { 
const form = document.querySelector( "#new-task-form"); 
const input = document.querySelector("#new-task-input"); 
const list_el = document.querySelector("#tasks");


form.addEventListener ('Submit',(e) => {
    e.preventdefault() ; //stops page refreshing when form submitted

    const task = input.value;
    
    if (!task) {
        alert("Please enter a task!") ;
        return
    } 
    
   const_task_el = document.createElement("div")
   task_el.classList.add("task");

   const task_content_el = document.createElement("div")
   task_content_el.classList.add("content");
   task_content_el.innerText =  task ;

   task_el.appendChild(task_content_el)
   list_el.appendChild(task_el)
})

ive checked for spelling mistakes in id names but cant help to find the issue. the html file is like so

<!DOCTYPE html>
 <html lang="en"> 
<head> 
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>YETIS TO DO LIST</title> 
<link rel="stylesheet" href = "main.css" /> 
</head> 

<body> 
<header> 
<h1>TO DO LIST</h1> 
<form id = "new-task-form"> 
<input type ="text" 
 id ="new-task-input" 
 name ="new-task-input" placeholder ="What would you like to do today?"
/>
    <input 
         type ="submit" 
         id = "new-task-add"
         value ="Add task" /> 
      
    </form>

</header>
<main> 
<section class="taskslist"> 
<h2>Tasks</h2> 
<div id="tasks">

<!--<div class="task">
<div class="content">
 <input type ="text" 
   class ="text" 
    value = "My first task" 
   readonly

</div> 
 <div class="actions"> 
 <button class="edit">Edit</button>
 <button class="delete">Delete</button> --> 

</div> 
</section> 
</main>
 <script src="main.js"></script>

</body> 
</html>
Tags:

2

Answers


  1. 0
    1. fix spelling error to preventdefault() to preventDefault()
    2. fix this line const_task_el = document.createElement("div") to const task_el = document.createElement('div') and check if it works or not
    Login or Signup to reply.
  2. 0

    The name of the form event is ‘submit’, all lowercase, not ‘Submit’. So you are never executing your DOM insertion code.

    You are also missing }) at the end of your Javascript file (i.e. to end your "load" event listener code)

    These of course are in addition to the two things already mentioned:

    • preventDefault() vs preventdefault() you need the capitol D
    • const task_el not const_task_el a space instead of an underscore
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search