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

Question

Итак, я пытаюсь создать простое приложение для создания списка. Я хочу добавить класс «флажок» в список элементов, когда на них нажимают. Я пытался использовать делегирование событий, чтобы сделать это, но я не думаю, что я делаю это правильно. Я не был уверен, должен ли я использовать «addEventListener» или «onclick». И какая разница на самом деле? Я новичок в javascript, так что, если вы могли бы объяснить соответственно, я был бы признателен.

<div id="todoList">
    <h1>To Do List</h1>
      <form id="todoForm">
        <input id="todoInput">
        <button type="button" onclick="todoList()">Click Here</button>
      </form>
    <div id="listText">
      <ul id="list">
      </ul>
    </div>
  </div>

CSS

#todoList {
  display: block;
  text-align:center;
}
li {
  list-style: none;
  text-align: left;
  border-bottom: 1px solid black

}
#listText {
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  padding-left: 70px;
  padding-right: 85px;
}

ul li.checked {
  text-decoration: line-through;
}

Сценарий

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}


  var ul = document.getElementById("ul");
  ul.addEventListener("click", function(e) {
    if (e.target.tagName === "li"){
      e.target.classList.toggle("checked");
    }

  });

Answer 1

Вы были действительно очень близки!

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}

var ul = document.getElementById("list");
  ul.addEventListener("click", function(e) {
  if (e.target.tagName === "LI"){
    e.target.classList.toggle("checked");
  }
});

Ваша первая проблема заключалась в том, что вы делали document.getElementById('ul'), ваш ul идентификатор элемента был на самом деле list. Просто глупая ошибка.

Мне действительно пришлось открыть devtools и поставить точку останова в вашем условном выражении, чтобы проверить, на что нажали.

Оказывается, e.target.tagName оценивается как LI, а не li.

Просто нужно изменить чек на LI

Что касается использования событий. onclick будет выполнять ту же работу, что и addEventListener. То, как вы сделали это здесь с делегированием событий, в значительной степени так же хорошо, как вы получите это с помощью vanilla JS. В конце концов, все сводится к личным предпочтениям: в некоторых средах вы можете настраивать события с помощью атрибутов элементов, а в некоторых - настраивать их с помощью прослушивателей событий, которые вы можете смешивать и сопоставлять, если хотите. Это действительно зависит от вас и вашей команды (если это совместный проект).

Answer 2

Вы должны проверить в верхнем регистре LI. Для поиска без учета регистра используйте localeCompare и нет элемента с идентификатором ul

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}


var ul = document.getElementById("list");
ul.addEventListener("click", function(e) {
  if (e.target.tagName.localeCompare("li")) {

    e.target.classList.toggle("checked");
  }

});

#todoList {
  display: block;
  text-align: center;
}

li {
  list-style: none;
  text-align: left;
  border-bottom: 1px solid black
}

#listText {
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  padding-left: 70px;
  padding-right: 85px;
}

.checked {
  text-decoration: line-through;
}

<div id="todoList">
  <h1>To Do List</h1>
  <form id="todoForm">
    <input id="todoInput">
    <button type="button" onclick="todoList()">Click Here</button>
  </form>
  <div id="listText">
    <ul id="list">
    </ul>
  </div>
</div>

Answer 3

вы можете использовать .delegate

$(document).delegate('h', 'click', function () {
        var id = this.id;
        document.getElementById('chkod').value = id;
    });