所以我制作了此javascript代码以动态添加列表。我在HTML文件中添加了一个列表，其中旁边有复选框。出于未知原因，此“ on”已自动添加到列表中。请帮助。
let newList = document.querySelector('input');
let addList = document.getElementById('addBtn');
let ulist = document.querySelector('ul');
newList.addEventListener('change', addNewList);
function addNewList(e) {
let head1 = document.createElement('h1');
let list = document.createElement('li');
let h1Node = document.createTextNode(newList.value);
list.appendChild(head1);
ulist.appendChild(list);
head1.appendChild(h1Node);
h1Node = document.createTextNode("");
}
addList.onclick = addNewList();<!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>
<div class = "container">
<div class = "list">
<ul>
<li><h1>Check The Garage</h1></li>
<li><h1>Practice Basketball</h1></li>
<li><h1>Take a shower tonight</h1></li>
<li><h1>Get a girlfriend</h1></li>
<li><input type = "checkbox" style = "float: left; margin-right: 10px;"><h1>List with checkbox</h1></li>
</ul>
<form method = "" action = "">
<input type = "text" id = "to-doList">
</form>
<button type = "submit" id = "addBtn">Add</button>
</div>
</div>我想摆脱列表中的“ on”。请有人向我解释发生了什么事以及如何预防。
newList引用复选框元素，而该元素的value为on。
您可能不想要复选框值，而是希望从输入id="to-doList"中获得该值。
更改：
let h1Node = document.createTextNode(newList.value);
收件人：
let h1Node = document.createTextNode(document.querySelector('#to-doList').value)
通过在函数名称的末尾指定()，您的函数将在页面加载时执行。尝试不使用()。
let newList = document.querySelector('input');
let addList = document.getElementById('addBtn');
let ulist = document.querySelector('ul');
newList.addEventListener('change', addNewList);
function addNewList(e) {
let head1 = document.createElement('h1');
let list = document.createElement('li');
let h1Node = document.createTextNode(document.querySelector('#to-doList').value);
list.appendChild(head1);
ulist.appendChild(list);
head1.appendChild(h1Node);
h1Node = document.createTextNode("");
}
addList.onclick = addNewList;<link href="https://fonts.googleapis.com/css?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
<div class="container">
<div class="list">
<ul>
<li><h1>Check The Garage</h1></li>
<li><h1>Practice Basketball</h1></li>
<li><h1>Take a shower tonight</h1></li>
<li><h1>Get a girlfriend</h1></li>
<li><input type="checkbox" style="float: left; margin-right: 10px;"><h1>List with checkbox</h1></li>
</ul>
<form method="" action="">
<input type="text" id="to-doList">
</form>
<button type="submit" id="addBtn">Add</button>
</div>
</div>注释此行将摆脱它：
addList.onclick = addNewList();
要测试，请使用：
//addList.onclick = addNewList();
let newList = document.querySelector('input');
let addList = document.getElementById('addBtn');
let ulist = document.querySelector('ul');
newList.addEventListener('change', addNewList);
function addNewList(e) {
let head1 = document.createElement('h1');
let list = document.createElement('li');
let h1Node = document.createTextNode(newList.value);
list.appendChild(head1);
ulist.appendChild(list);
head1.appendChild(h1Node);
h1Node = document.createTextNode("");
}
//addList.onclick = addNewList();<!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>
<div class = "container">
<div class = "list">
<ul>
<li><h1>Check The Garage</h1></li>
<li><h1>Practice Basketball</h1></li>
<li><h1>Take a shower tonight</h1></li>
<li><h1>Get a girlfriend</h1></li>
<li><input type = "checkbox" style = "float: left; margin-right: 10px;"><h1>List with checkbox</h1></li>
</ul>
<form method = "" action = "">
<input type = "text" id = "to-doList">
</form>
<button type = "submit" id = "addBtn">Add</button>
</div>
</div>