我创建了一个待办事项列表。用户可以写下当天要完成的任务列表。一旦任务完成，他们就可以勾选复选框；触发器"；线槽。然后任务从id为"0"的无序列表中移动；uList"到id为"0"的无序列表；taskCompleted"；。然而，我希望用户能够通过双击将后者中的项目移回前者；状态"；。即没有换行符和未选中的复选框。为了做到这一点，我已经使用了event对象，现在我正在使用for循环。然而，两次尝试都失败了。我期待着你的来信。
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;
}<!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>您在全局变量上进行了大量循环，并一直添加事件侦听器。我试着清理一下，用一个函数创建了一个只有两个侦听器继续工作的任务。
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>