I am unable to add an event listener to my button icons with class projEdit. I would display a new "page" whenever edit button is clicked to enable the user to add tasks to projects. The problem is that the code is not reaching the handler function. The button prints correctly in the console so I know I am targeting the right element.
HTML:
<span>Sample Title</span>
<button class="projEdit"><span> <i class="fas fa-edit"></i></span></button>
<button class="projDel"><span><i class="fas fa-trash-alt"></i></span></button>
JS to display new project: displayProject.js
function getProjectHtml(title) {
const str = `<h2><span>${title}</span>
<button class="projEdit"><span> <i class="fas fa-edit"></i></span></button>
<button class="projDel"><span><i class="fas fa-trash-alt"></i></span></button></h2>`
return str;
}
export default function displayProject(docRef) {
docRef.onSnapshot((snapshot) => {
snapshot.docChanges().forEach((change) => {
if (change.type == "added") {
const projectsDescription = document.getElementById('projectsDescription');
let project = document.createElement('div');
project.innerHTML = getProjectHtml(change.doc.data().title);
projectsDescription.appendChild(project);
}
})
});
}
Buggy JS - to add event listener to the edit button icon: saveProject.js
function editTheProject() {
console.log('hi'); // NOT REACHED
}
function activateEditBtn() {
const btn = document.querySelector('#projectsDescription > *:last-child .projEdit');
console.log(btn); // This Is Fine!
btn.addEventListener('click', editTheProject);
}
function saveProjectFunctionality() {
// Step 1 - add project to DB
const project = getProject();
addProjectToDB(project);
// Step 2 - Close the Modal - LEFT
// Step 3 - Add event listener to the Edit button
activateEditBtn();
}
export default function saveProject() {
const saveProjectBtn = document.getElementById('saveProjectBtn');
saveProjectBtn.addEventListener('click', saveProjectFunctionality);
}
Aucun commentaire:
Enregistrer un commentaire