Question

我用JavaScript制作了Todo列表。我只是使用JavaScript。我希望在按下<li>元素时完成工作。我为此创建了一个方法。我该如何做？

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

我希望帖子完成。我已经为此准备了CSS

let todos = [
  {
    id: 1,
    title: "Javascript",
    completed: true
  },
];

function render() { /* I list object */
  flen = todos.length;
  text = "<ul id=myUL>";
  for (i = 0; i < flen; i++) {
    text +=
      '<li  id="' +
      todos[i].id +
      '">' +
      todos[i].title +

      "</li>";
  }
  text += "</ul>";
  document.getElementById("demo").innerHTML = text;
}
render();


function completedTodo(e) { /*it's method */

}

Answer 1

将事件侦听器附加到li，然后单击时将completed的类添加到其中。

document.querySelectorAll('li')
 .forEach((item) => {
   item.addEventListener('click', () => {
     item.className += " completed";
   })
})

使用JavaScript的待办事项清单

1 个答案: