[这里，我正在使用Javascript将新列表动态添加到html文件中。每当我单击复选框时，我都希望将直行插入特定列表，但我用于代码的逻辑不起作用。当我单击复选框时，它不起作用。这是我的html格式：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Project 1</title>
<script src = "main.js" async></script>
<link href = "main.css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
</head>
<body>
<h1 class = 'checklist'>Checklist</h1>
<div class = "container">
<div class = "list">
<ul>
<!-- <li><h1>To Do List:</h1></li>-->
</ul>
<form method = "" action = "">
<input type = "text" id = "to-doList">
</form>
<button type = "submit" id = "addBtn">Add</button>
</div>
</div>
</body>
</html>
这是我的Javascript文件。我知道我的代码现在很乱，但是有人可以帮助我该怎么做。单击旁边的复选框时如何在特定列表中放置直通。
//Gets the element by id
let newList = document.getElementById('to-doList');
let addList = document.getElementById('addBtn');
//Gets the element by using element name
let ulist = document.querySelector('ul');
//Holds the value from the input
let textValue = document.createTextNode("");
let checkboxOut = document.createElement('input');
checkboxOut.type = 'checkbox';
let mainList = document.querySelectorAll('li');
let storeNum = [0];
//Stores new value when input changes
newList.addEventListener('change', updateList);
//Function for the on-click button
function addNewList(e) {
//Creates html element
let head1 = document.createElement('h1');
let list = document.createElement('li');
let checkbox = document.createElement('input');
let newDiv = document.createElement('div');
let newBtn = document.createElement('button');
let deleteNode = document.createTextNode('Delete');
let num = mainList.length;
//Makes the input as a checkbox
checkbox.type = 'checkbox';
//Makes an id for the checkbox and button
checkbox.id = num;
newBtn.id = 'dynamicBtn'
//Takes the value of the textValue
let h1Node = document.createTextNode(textValue.nodeValue);
//Makes the head1 as its child element
list.appendChild(checkbox);
list.appendChild(head1);
list.appendChild(newBtn);
newBtn.appendChild(deleteNode);
ulist.appendChild(list);
head1.appendChild(h1Node);
let checkBoxValue = document.getElementById(num);
console.log(checkBoxValue);
checkboxOut = checkBoxValue;
checkBoxValue.addEventListener('change', updateCheck);
let theList = document.querySelectorAll('li');
mainList = theList;
console.log(theList.length);
storeNum += theList.length;
}
//Function for newList.addEventListener
function updateList(e){
//Passes the value from the input to the variable
textValue.textContent = e.target.value;
}
function updateCheck(e){
let updateCheckBox = document.createElement('input');
updateCheckBox.type = 'checkbox';
updateCheckBox = checkboxOut;
if(updateCheckBox.checked == true && updateCheckBox.id == 0){
e.target.nextElementSibling.style.textDecoration = 'line-through';
console.log(updateCheckBox.id);
}
if(!updateCheckBox.checked){
e.target.nextElementSibling.style.textDecoration = 'none';
}
}
//When the button is clicked, this executes the addNewList function
addList.onclick = addNewList;
如果我的理解正确，您想在标签上添加一个直通行号，该标签对应于所单击的复选框。为此，将updateCheck函数更改为：
function updateCheck(e){
if(e.target.checked == true){
e.target.nextElementSibling.style.textDecoration = 'line-through';
console.log(updateCheckBox.id);
}
if(!e.target.checked){
e.target.nextElementSibling.style.textDecoration = 'none';
}
}