Let me start by saying that I have come across similar posts about tracking event listeners, but in my specific case, I am struggling to figure it out. While I am familiar with the event.target property, I just can't seem to make it work.
Here is a snippet of my code:
const taskListSection = document.querySelector('.task-list-section');
const taskListAddModal = document.querySelector('.task-list-add-modal');
const confirmTaskAddBtn = document.getElementById('add-list');
const cancelTaskAddBtn = document.getElementById('cancel-add-list');
const addTaskBtn = document.getElementById('add-task');
const titleInput = document.getElementById('title');
const descriptionInput = document.getElementById('description');
const timeInput = document.getElementById('time');
const clearUserInput = () => {
titleInput.value = '';
descriptionInput.value = '';
timeInput.value = '';
};
const taskListAddModalHandler = () => {
const taskList = taskListSection.querySelectorAll('li');
taskListAddModal.classList.toggle('visible');
addTaskBtn.classList.toggle('visible');
taskList.forEach((list) => {
list.classList.toggle('visible');
});
clearUserInput();
};
const confirmAddTask = () => {
const newTask = document.createElement('li');
const taskList = taskListSection.querySelectorAll('li');
const titleInputValue = titleInput.value;
const descriptionInputValue = descriptionInput.value;
const timeInputValue = timeInput.value;
if(titleInputValue.trim() === ''){
alert('Please enter a title of your task!');
return;
}
newTask.className = 'visible';
newTask.innerHTML =
`<button class="check-task">C</button>
<button class="remove-task">X</button>
<h4>Title:</h4>
<p>${titleInputValue}</p>
<h4>Description:</h4>
<p>${descriptionInputValue}</p>
<h4>Time:</h4>
<p>${timeInputValue}</p>`;
taskListSection.append(newTask);
taskListAddModal.classList.remove('visible');
taskList.forEach((list) => {
list.classList.add('visible');
});
addTaskBtn.classList.toggle('visible');
clearUserInput();
};
addTaskBtn.addEventListener('click', taskListAddModalHandler);
cancelTaskAddBtn.addEventListener('click', taskListAddModalHandler);
confirmTaskAddBtn.addEventListener('click', confirmAddTask);body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-wrapper{
width: 70rem;
margin: 0 auto;
border: 2px solid black;
position: relative;
}
.main-wrapper #add-task{
display: none;
}
.main-wrapper #add-task.visible{
position: absolute;
top: 150px;
right: 100px;
width: 50px;
height: 50px;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
}
ul{
border: 1px solid black;
width: 40rem;
height: 40rem;
margin: 10rem auto;
padding: 0;
background-color: red;
overflow-x: scroll;
}
ul form{
flex-direction: column;
width: 100%;
height: 40rem;
background-color: white;
display: none;
}
ul form input[type=button]{
display: block;
margin: 10px auto;
}
ul form.visible{
display: flex;
}
ul li{
display: none;
}
ul li.visible{
display: block;
width: 80%;
list-style: none;
border: 2px solid black;
margin: 10px;
position: relative;
}
ul li .check-task{
position: absolute;
width: 30px;
height: 30px;
top: 30px;
right: 30px;
}
ul li .remove-task{
position: absolute;
width: 30px;
height: 30px;
bottom: 30px;
right: 30px;
}
ul li.checked{
background-color: green;
}<!DOCTYPE html>
<html lang="en>
...
(remaining text unchanged)
The issue I'm facing is tracking which 'C' button was clicked on which 'li' element. The desired functionality is that when the 'C' button on a certain 'li' element is clicked, I want THAT particular 'li' element to be assigned the class 'checked' (resulting in a green background). You create 'li' elements by clicking the "+" button at the top right corner, then filling in the input fields, and finally clicking the ADD button. Excuse the rudimentary design; it was created quickly for illustrative purposes. I'm seeking a solution using pure JS. Thank you in advance.