如何使用JS点击事件实现待办项从待办列表移动到已完成列表

核心问题说明 #

现有代码存在3个影响功能的问题：

• 重复ID冲突：待办列表和已完成列表都使用了myUL作为ID，不符合ID全局唯一的规范，导致DOM选择逻辑异常
• 点击逻辑缺失：点击待办项仅切换了选中样式，没有执行节点跨列表移动的操作
• 缺失函数定义：已完成列表的清空按钮绑定的NewFunction未定义，会触发运行报错

修复逻辑说明 #

1. 修正HTML中重复的ID，将待办列表ID改为todoUL，已完成列表ID改为doneUL，同时修正两个清空按钮的函数绑定
2. 分别给两个列表绑定点击事件，点击待办列表的项时，自动将其移动到已完成列表；可选配置点击已完成列表的项可以移回待办列表
3. 补充两个清空函数的定义，分别对应待办、已完成列表的清空操作

注：DOM的appendChild方法传入已存在的DOM节点时，会自动将节点从原有父容器中移除，再插入到新的父容器末尾，因此不需要额外执行删除原节点的操作。

完整修改代码 #

HTML 代码 #

<form id="todo" style="float:left">
  <h1 style="font-family:Helvetica; color:#006600"><b>To Do</b>
    <input type="text" id="myInput" placeholder="Add Item">
    <span onclick="newElement()" class="addBtn">Add</span>
    <input type="button" onclick="clearTodo()" value="Clear">
    <ul id="todoUL">
    </ul>
  </h1>
</form>
<form id="done" style="float:right">
  <h2 style="font-family:Helvetica; color:#006600"><b>Done</b>
    <input type="button" onclick="clearDone()" value="Clear"></h2>
  <ul id="doneUL">
  </ul>
</form>

JS 代码 #

// 为已有列表项添加关闭按钮
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// 点击关闭按钮隐藏对应列表项
var close = document.getElementsByClassName("close");
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// 获取两个列表的DOM节点
const todoList = document.getElementById('todoUL');
const doneList = document.getElementById('doneUL');

// 待办列表点击事件：点击后移到已完成列表
todoList.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    const targetLi = ev.target;
    targetLi.classList.add('checked');
    doneList.appendChild(targetLi);
  }
}, false);

// 可选功能：点击已完成列表的项可以移回待办列表
doneList.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    const targetLi = ev.target;
    targetLi.classList.remove('checked');
    todoList.appendChild(targetLi);
  }
}, false);

// 点击添加按钮创建新待办项
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    todoList.appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

// 清空待办列表
function clearTodo() {
  todoList.innerHTML = '';
}

// 清空已完成列表
function clearDone() {
  doneList.innerHTML = '';
}

内容的提问来源于stack exchange，提问作者EternalNightmare01