无法让我的代码使用“addEventListner”将元素从一个无序列表移回另一个无序列表

如何解决无法让我的代码使用“addEventListner”将元素从一个无序列表移回另一个无序列表

我已经创建了一个待办事项列表。用户可以写下他们想要在当天完成的任务列表。任务完成后，他们可以勾选复选框，“触发”一个线槽。然后任务从id为“uList”的无序列表移动到id为“taskCompleted”的无序列表。但是，我希望用户只需双击即可将位于后者的项目移回前者。任务必须以其原始“状态”呈现。即没有线通过和未选中的复选框。我已经使用了事件对象，现在我正在使用 for 循环，以便这样做。然而，这两次尝试都失败了。我期待着收到您的来信。

void *const

var elUlList = document.getElementById("uList");
var btn = document.getElementById("btn");
const elInput = document.getElementById("input");
const footer = document.querySelector("footer");
const message = document.getElementById("message");
const elCounter = document.getElementById("counter");
const taskCompleted = document.getElementById("taskCompleted");
var elements = document.getElementsByTagName("li");
var input = document.getElementsByTagName("input")

function createListItems() {
  var inputValue = elInput.value;
  if(inputValue === "" || inputValue === null) return

  var newLi = document.createElement("li");
  newLi.id = Date.Now().toString();
  var input = document.createElement("input");
  input.type = "checkBox";
  input.name = "to-do-input";
  var newText = document.createTextNode(inputValue);
  newLi.appendChild(input);
  newLi.appendChild(newText);
  elUlList.appendChild(newLi);
  elCounter.innerHTML =+ elements.length;

  var todoInput = document.getElementsByTagName("to-do-input");

  for(var i = 0; i < todoInput.length; i++) {
    todoInput[i].addEventListener("change",function(e) {
      if(e.target.checked == true) {
        e.target.parentNode.remove();
      }
    })
  }
  }

btn.addEventListener("click",createListItems,false);

elInput.addEventListener("keyup",function(e) {
  if(e.keyCode === 13) {
    e.preventDefault();
    btn.click()
  }
})

elInput.addEventListener("mouSEOver",emptyField,false)

function emptyField() {
  this.value = "";
}

elUlList.addEventListener("change",function(e){
  var target = e.target;
  var parent = target.parentNode;
  alert("are you sure you want to move this item to completed task");
  parent.classList.add("taskMoved");
  taskCompleted.appendChild(parent);
  elCounter.innerHTML =+ elements.length;
});


elUlList.addEventListener("click",strikeOutElement,false);


function strikeOutElement(e) {
  var target = e.target;
  if(target.matches("input[type=checkBox]")){
  target.closest("li").classList.toggle("lineThrough",target.checked);
  }
}

var taskMoved = document.getElementsByClassName("taskMoved");

if(taskMoved.length > 0) {
  for(var i = 0; i < taskMoved.length; i++) {
    taskMoved[i].addEventListener("dblclick",function() {
    taskMoved[i].classList.remove("lineThrough");
    taskMoved[i].firstElementChild.toggle("lineThrough",target.checked);
    taskMoved[i].firstElementChild.checked = false;
    elUlList.appendChild(taskMoved[i]);
  },false);
  }
}
var date = new Date().toLocaleDateString("en-US")

footer.innerHTML = date
console.log(date)

.greenColor {
  color: green;
}

.redColor {
  color: red;
}

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

li {
  list-style-type: none;
}

解决方法

您对全局变量进行了大量循环并一直添加事件侦听器。我试图稍微清理一下，使用一个函数创建一个只有 2 个继续工作的侦听器的任务。

const tasksTodo = document.getElementById("uList");
var btn = document.getElementById("btn");
const elInput = document.getElementById("input");
const footer = document.querySelector("footer");
const message = document.getElementById("message");
const elCounter = document.getElementById("counter");
const tasksCompleted = document.getElementById("taskCompleted");
var elements = document.getElementsByTagName("li");
var input = document.getElementsByTagName("input");

function createTask(input) {
  let title = input.value;
  if ( !title ) return false;
  let task = document.createElement("li");
  let checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  task.appendChild(checkbox);
  task.appendChild(document.createTextNode(title));

  //Checkbox is source of truth,listen to it changing
  checkbox.addEventListener("change",e => {
      if (checkbox.checked)
        completeTask(task);
      else
        undoTask(task);
  });
  tasksTodo.appendChild(task);
  //Then let dblclick just toggle the box
  task.addEventListener("dblclick",e =>{checkbox.click()});
  //reset the input,we're done
  input.value = '';
}

function completeTask(task) {
  task.classList.add("lineThrough");
  tasksCompleted.appendChild(task);
}

function undoTask(task) {
  task.classList.remove("lineThrough");
  tasksTodo.appendChild(task);
}

btn.addEventListener("click",e=>{createTask(elInput)},false);
elInput.addEventListener("keyup",function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    btn.click();
  }
});

var date = new Date().toLocaleDateString("en-US");

footer.innerHTML = date
console.log(date)

.greenColor {
  color: green;
}

.redColor {
  color: red;
}

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

li {
  list-style-type: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Practise App</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <div id="message" class=""></div>
  <ul id="uList"></ul>
  <button id="btn" type="button" name="button">click here to add items</button><br>
  <input id="input" type="text" name="" value="">
  <div id="counter" class=""></div>
  <p>task Completed</p>
  <ul id="taskCompleted"></ul>

  <footer></footer>


  <script src="index.js" type="text/javascript"></script>
</body>

</html>