'How do I target my class task for the event Listener to Handle?

My buttons for edit delete and save are not working and that is because the event listener is passing an element that has nothing in it, but I want to target the class <div class="task" date-id = "${id}"> for the event listener.

This is what is wrong:

elements.list.addEventListener('click',event => the elements.list is wrong as it is not holding anything. But I would like to target the <div class="task" date-id = "${id}"> for the eventEventListener.

Please see the full code so you have a better idea:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-do App</title>
    <script src="js/main.js" defer></script>
    <script src="js/dateTime.js" defer></script>

    <link rel="stylesheet" href="css/main.css" />
</head>

<body>
<div class="header">
      <h1>To-Do List</h1>
  
      <div class="time">
        <div class="dateTime"></div>
        <div class="day"></div>
      </div>
    </div>
    <form id="new-task-form">
      <div class="add-task">
        <input type="text" name="new-task-input" id="new-task-input" placeholder="What do you have planned?" />
        <input type="date" id="calendar">
      </div>
  
      <input type="submit" id="new-task-submit" value="Add task" />
    </form>
  </header>
  
  <main>
    <section class="task-list">
      <h2>Tasks</h2>
      
      <div id="tasks">
        <!--<button class = "sort">Sort</button>
              <div class="task">
                      <div class="content">
                          <input 
                              type="text" 
                              class="text" 
                              value="A new task"
                              readonly>
                      </div>
                      <div class="actions">
                          <button class="edit">Edit</button>
                          <button class="delete">Delete</button>
                      </div>
                  </div>--> 
                
      </div>
    </section>
  </main>

    
</body>
</html>

/************************************
 * creates objct of elements needed *
 ************************************/
 
 const elements = {
    form: document.querySelector("#new-task-form"),
    input: document.querySelector("#new-task-input"),
    list: document.querySelector("#tasks"),
    cal: document.querySelector("#calendar")
}

/****************************
 * Generates an ID for task *
 ****************************/

 const createId = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`


/**********************************************
 * function that creates the HTML elements *
 **********************************************/

 const createTask = () => {
    const id = createId()
    const task = elements.input.value;
    const date = elements.cal.value;

    if(!task && !date) return alert("Please fill in task and select date");
    if(!task) return alert("Please fill in task");
    if(!date) return alert("Please select date");

    const tasks = document.createElement("div");

    tasks.innerHTML = `
    <button class = "sort">Sort</button>
    <div class="task" data-id = "${id}">
        <div class="content">
            <input type ="checkbox" class="tick">
            <input type ="text" class = "text" id = "text" readonly>${task}
            <label class = "due-date" for ="text">${date}</label>
            <input type ="date" class = "date" id = "date">
        </div>

        <div class = "actions">
            <button class="edit" data-id="${id}">Edit</button>
            <button class="delete" data-id="${id}">Delete</button>
        </div>
    </div>
    `
    elements.list.appendChild(tasks)
    return tasks
}


/**************************************************************
 * Event that listens for the edit,save and delete buttons    *
 **************************************************************/

elements.list.addEventListener('click',event => {
    const {target} = event
    const {id} = target.dataset
    const task = id ? document.querySelector('[data-id="${id}"]'):null;
    
    
    const type = {
        edit: event.target.classList.contains('edit'),
        delete: event.target.classList.contains('delete')
    }

    const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

    if(task && type.edit && isFromSaveLabel){
        const text = task.querySelector('.text')
        target.innerText = 'Edit'
        text.addAttribute('readonly')
        return
    };

    if(task && type.edit){
        const text = task.querySelector('.text')
        target.innerText = 'save'
        text.removeAttribute('readonly')
        text.focus()
        return
    };

    if(task && type.delete){
        return
    }
});

/*******************************************************************
 * Submits the HTML elements to have the lists submitted and created*
 *******************************************************************/

 const submitHandler = (event) =>{
    event.preventDefault();
    createTask();
}

elements.form.addEventListener("submit", submitHandler);

I have been asking a lot about this on the platform, but I realized I have been asking the wrong question. As mentioned above I need the event listener to target the <div class="task" date-id = "${id}"> that has been created with const tasks = document.createElement("div");

The reason is when you click on add task it creates a new <div class="task" date-id = "${id}"> for example ``````` with the contents class and everything in there.

PS: Apologies for the long-winded code, it's necessary so that you get the full picture of the issue and question

javascript event-handling

Solution 1:^[1]

Could it be beacause you used "date-id" on tasks.innerHTML, but use "data-id" on

const task = id ? document.querySelector('[data-id="${id}"]'):null;

Okay, I found some issues in the event listener:

the queryselector is not a template literal, so ${id} doesn't work.
"addAttribute" is wrong. "setAttribute" is the correct one.

Edit and save works after these are fixed.

/**************************************************************
 * Event that listens for the edit,save and delete buttons    *
 **************************************************************/

elements.list.addEventListener('click',event => {
    const {target} = event
    const {id} = target.dataset
    const task = id ? document.querySelector(`[data-id="${id}"]`):null;

    const type = {
        edit: event.target.classList.contains('edit'),
        delete: event.target.classList.contains('delete')
    }

    const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

    if(task && type.edit && isFromSaveLabel){
        const text = task.querySelector('.text')
        target.innerText = 'Edit'
        text.setAttribute('readonly', 'true')
        return
    };

    if(task && type.edit){
        const text = task.querySelector('.text')
        target.innerText = 'save'
        text.removeAttribute('readonly')
        text.focus()
        return
    };

    if(task && type.delete){
        return
    }
});

And for the error, it is probably a bug in the extension.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How do I target my class task for the event Listener to Handle?

Solution 1:[1]

Okay, I found some issues in the event listener:

Sources

Related Questions

Solution 1:^[1]