Кнопки удаления и завершения списка задач Javascript - PullRequest
Новая
       37

Кнопки удаления и завершения списка задач Javascript

0 голосов
/ 07 февраля 2019

My CodePen

Поэтому, когда я нажимаю кнопки удаления и завершения, он запускает эти функции 

function deleteListItem(){
   alert("Item was deleted");            
}


function completeListItem(){
   alert("This item was completed");
}

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

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

В вашем javascript, когда вы объявляете deleteButton и completeButton, им обоим назначается один и тот же элемент, ul.Этот элемент содержит весь список.Это не то, что вы хотите, вы хотите обрабатывать нажатия на кнопки.deleteButton должен быть назначен вашему элементу кнопки удаления, а ваш completeButton - вашему полному элементу кнопки.Для этого просто используйте идентификатор нужных кнопок вместо идентификатора UL.

В своем коде измените это: 

var deleteButton = document.getElementById("todo");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("todo");
completeButton.addEventListener("click", completeListItem);

На это: 

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

РЕДАКТИРОВАНИЕ: Поскольку ваши кнопки не уникальны, вы не должны использовать идентификатор для добавления прослушивателя событий.Вы должны использовать класс и назначить прослушиватель событий всем элементам класса, зациклив их.В вашем html добавьте атрибут класса к вашим кнопкам следующим образом: <button class="Remove"><i class="fa fa-trash" aria-hidden="true"></i></button>.Затем обработайте события следующим образом: 

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}
0 голосов
/ 07 февраля 2019 
var deleteButton = document.getElementById("Remove");
  deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
  completeButton.addEventListener("click", completeListItem);

Назначьте addEventListener определенной id кнопки.id todo - это ul, поэтому нажатие чего-либо внутри ul запустит обе функции

...