javascript中的示例待办事项列表：已完成的任务问题

Question

＆＃13;

＆＃13;

function todoList() {
  var item = document.getElementById('todoInput').value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  var completed_button = document.createElement('input');
  completed_button.type = "button";
  completed_button.value = "Completed";
  newItem.appendChild(completed_button);
  document.getElementById("todoList").appendChild(newItem)
}

＆＃13;

<h1>My To Do list</h1>
<form id="todoForm">
  <input id="todoInput">
  <button type="button" onclick="todoList()">Add Item</button>
</form>
<ul id="todoList">
  <h3>My Tasks</h3>
</ul>
<ul>
  <h3>Completed</h3>
</ul>

＆＃13;

＆＃13;

＆＃13;

当我点击已完成的按钮时，我想将其从我的任务中删除，然后将其添加到已完成。你能帮忙吗？

Answer 1

我用你的代码玩了一点，最后得到了这段代码： （我在代码中留下了评论）

＆＃13;

＆＃13;

function todoList() {
  var item = document.getElementById('todoInput').value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  var completed_button = document.createElement('input');
  completed_button.type = "button";
  completed_button.value = "Completed";
  completed_button.onclick = function() { // Added the onclick function
    clickComplete(this);
  };
  newItem.appendChild(completed_button);
  document.getElementById("todoList").appendChild(newItem);
}

// Added this function
function clickComplete(item) {
  document.getElementById("completed").appendChild(item.parentNode);
  item.remove(); // Removes the "completed" button
}

＆＃13;

<h1>My To Do list</h1>
<form id="todoForm">
  <input id="todoInput">
  <button type="button" onclick="todoList()">Add Item</button>
</form>
<ul id="todoList">
  <h3>My Tasks</h3>
</ul>
<ul id="completed">
  <h3>Completed</h3>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果要在该代码段中进行任何修改，请随时发表评论。

希望它有所帮助。