Блог

Я не могу добавить прослушиватель событий к значкам кнопок с помощью класса projEdit. Я бы отображал новую «страницу» при каждом нажатии кнопки редактирования, чтобы пользователь мог добавлять задачи в проекты. Проблема в том, что код не достигает функции обработчика. Кнопка правильно печатается в консоли, поэтому я знаю, что нацелен на нужный элемент.

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 для отображения нового проекта: 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);
            }
        })
    });
}
 

Багги JS — чтобы добавить прослушиватель событий к значку кнопки редактирования: 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);
}
 

После того, как вы сказали в комментариях, что прослушиватель событий добавляется только ко второму последнему элементу, я предполагаю, что у вас есть несколько кнопок редактирования и вы хотите добавить прослушиватель событий ко всем из них.

Ты можешь сделать это вот так:

 function activateEditBtn() {
    document.querySelectorAll('#projectsDescription .projEdit').forEach(btn => {
        console.log(btn);
        btn.addEventListener('click', editTheProject);
    });
}
 

В противном случае вы добавляете слушателя только к первому.