我创建了一个Todo应用程序，该应用程序从文本字段接收输入并将其添加到其下方的列表中，并且在创建该todo时，还将添加一个删除按钮，一个复选框和一个时间戳。现在，我正在尝试编写一个代码，当我选中复选框时，它会将下一个文本删除并标记为“完成”。下面是HTML和JavaScript代码。
HTML代码
<!doctype html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Todo App</h1>
<input type="text"> <button>Add</button>
<p>Todo List</p>
<ol>
</ol>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
JavaScript代码
var input = document.querySelector("input");
var button = document.querySelector("button");
var ol = document.querySelector("ol");
var date = new Date();
button.addEventListener("click", function() {
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
var li = document.createElement("li");
var label = document.createTextNode(input.value);
var text = document.createTextNode("Delete");
var click = document.createElement("button");
var dat = document.createTextNode(date);
click.appendChild(text)
li.appendChild(label);
li.appendChild(checkbox);
li.appendChild(click);
li.appendChild(dat);
ol.appendChild(li);
input.value = "";
});
谢谢，我该怎么做？
您可以将click事件处理程序附加到该复选框，单击即可管理样式。另外，要管理元素上的样式，可以使用label元素而不是textNode。
尝试以下方式：
var input = document.querySelector("input");
var button = document. querySelector("button")
var ol= document.querySelector("ol")
var date=new Date();
button.addEventListener("click", function(){
var checkbox = document.createElement("input");
checkbox.type="checkbox";
checkbox.addEventListener('click', function(){
if(this.checked){
this.parentNode.firstChild.style.textDecoration='line-through';
}
else{
this.parentNode.firstChild.style.textDecoration='';
}
});
var li=document.createElement("li");
var label= document.createElement('label');
label.textContent = input.value;
var text=document.createTextNode("Delete");
var click=document.createElement("button");
var dat = document.createTextNode(date);
click.appendChild(text)
li.appendChild(label);
li.appendChild(checkbox);
li.appendChild(click);
li.appendChild(dat);
ol.appendChild(li);
input.value="";
})<h1>Todo App</h1>
<input type="text"> <button> Add </button>
<p> Todo List</p>
<ol></ol>