I have been grappling with a puzzle for an extended period of time. In my code, I have an entity called the "To-Do List". Within this list, I am attempting to enable functionality for the buttons labeled "doneButton" and "deleteButton" using the "addEventListener" method.
Unfortunately, the buttons are not functioning as expected. It's peculiar because when I execute console.log(todoItem.doneButton), it correctly displays the button. However, immediately following that line where I attempt to apply the "addEventListener" to the same element, nothing happens at all.
(function() {
function createAppTitle(title) {
let appTitle = document.createElement('h2');
appTitle.textContent = title;
appTitle.classList.add('mt-5', 'mb-3');
return appTitle;
}
function createToDoList() {
let list = document.createElement('ul')
return list;
}
function createToDoForm() {
let buttonWrapper = document.createElement('div')
let form = document.createElement('form')
let input = document.createElement('input')
let button = document.createElement('button')
form.classList.add('input-group', 'mb-3');
input.classList.add('form-control');
input.placeholder = 'Enter the name of the task';
buttonWrapper.classList.add('input-group-append');
button.classList.add('btn', 'btn-primary');
button.textContent = 'Add a task';
buttonWrapper.append(button);
form.append(input);
form.append(buttonWrapper);
return {
form,
input,
button
};
}
function createToDoItem (name) {
let item = document.createElement('li')
let buttonGroup = document.createElement('div')
let doneButton = document.createElement('button')
let deleteButton = document.createElement('button')
item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
item.textContent = name;
buttonGroup.classList.add('btn-group','btn-group-sm');
doneButton.classList.add('btn','btn-success');
doneButton.textContent = "Done";
deleteButton.classList.add('btn','btn-danger');
deleteButton.textContent = 'Delete';
buttonGroup.append(doneButton);
buttonGroup.append(deleteButton);
item.append(buttonGroup);
return {
item,
doneButton,
deleteButton
}
}
document.addEventListener('DOMContentLoaded', function () {
let container = document.querySelector('.container');
let appTitle = createAppTitle('Name of the Target');
let list = createToDoList();
let form = createToDoForm();
let todoItems = [createToDoItem('Book your trip'), createToDoItem('Fly to Dubai'), createToDoItem('Book' +
' your trip')];
container.append(appTitle);
container.append(form.form);
container.append(list);
list.append(todoItems[0].item)
list.append(todoItems[1].item)
list.append(todoItems[2].item)
form.form.addEventListener('submit', (e)=> {
e.preventDefault();
if (!form.input.value) {
return;
}
let todoItem = createToDoItem(form.input.value);
console.log(todoItem.doneButton)
todoItem.doneButton.addEventListener('click', function () {
console.log('done button clicked');
});
todoItem.deleteButton.addEventListener('click', ()=> {
console.log('delete button clicked');
})
list.append(createToDoItem(form.input.value).item)
form.input.value = '';
});
})
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>ToDo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c0dac1dac7">[email protected]</a>/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<script src="index.js" defer></script>
</head>
<body>
<div id="toDo" class="container"></div>
</body>
</html>