javascript&；html-每次用户在文本框中输入项时创建新复选框选项
因此，基本上我正在创建一个程序，允许用户创建和管理“待办事项列表”。这将允许用户添加新项目、删除所选项目、突出显示/取消突出显示所选项目以及对项目进行排序等。我目前正在使用“添加”按钮，但我对HTML中的不同功能和允许我操作DOM的代码感到非常困惑 当用户单击add按钮且项目名称有效时，应将新项目添加到页面的待办事项列表中（这本质上为用户添加的每个项目创建一个新复选框）。该复选框基本上是用于选择/取消选择项目，以及单击“添加”按钮时项目名称文本框中的文本 我想我现在有两个问题。我正在尝试验证项目名称是否至少有1个字符长。我在我的“addHandler.js”文件中编写了代码，但当我在文本框中不写任何内容，并单击HTML浏览器上的“添加”按钮时，不会弹出错误消息。我不知道为什么它忽略了我的功能。另一件我正在努力解决的事情是为添加的每个有效项创建一个新复选框的部分。我知道如何在我的HTML页面上创建一个复选框，但我不知道如何让我的程序为用户输入的每个项目创建一个新的复选框 如有任何帮助或推动，我们将不胜感激。我还不熟悉HTML和javascript，所以用简单的术语解释这些东西也会让我非常感激 todo.html代码：javascript&；html-每次用户在文本框中输入项时创建新复选框选项,javascript,html,button,textbox,Javascript,Html,Button,Textbox,因此，基本上我正在创建一个程序，允许用户创建和管理“待办事项列表”。这将允许用户添加新项目、删除所选项目、突出显示/取消突出显示所选项目以及对项目进行排序等。我目前正在使用“添加”按钮，但我对HTML中的不同功能和允许我操作DOM的代码感到非常困惑 当用户单击add按钮且项目名称有效时，应将新项目添加到页面的待办事项列表中（这本质上为用户添加的每个项目创建一个新复选框）。该复选框基本上是用于选择/取消选择项目，以及单击“添加”按钮时项目名称文本框中的文本 我想我现在有两个问题。我正在尝试验证项目
<html>
<head>
<title>Checklist</title>
</head>
<body>
<div><h1>My to-do list</h1></div><br />
<div id ="myCheckList">Enter an item:</div>
<div>Type something: <input type="text" id="textbox"></input></div>
<button type="button" id="addBut">Add item</button>
<button type="button" id="removeBut">Remove items</button>
<button type="button" id="toggleBut">Toggle highlight</button>
<button type="button" id="sortBut">Sort items</button>
<script src="addHandler.js"></script>
</body>
</html>
您应该有一个包装器，其中包含您可以附加新元素的复选框项
function addItem() {
var input = document.getElementById("textbox");
var wrapper = document.getElementById("checklist_items");
if(input.value.trim() != "") {
var new_element = document.createElement("DIV");
new_element.innerHTML = '<input type="checkbox"> '+input.value;
wrapper.appendChild(new_element);
}
else {
alert("You must enter at least 1 character.");
}
}
您应该有一个包装器，其中包含您可以附加新元素的复选框项
function addItem() {
var input = document.getElementById("textbox");
var wrapper = document.getElementById("checklist_items");
if(input.value.trim() != "") {
var new_element = document.createElement("DIV");
new_element.innerHTML = '<input type="checkbox"> '+input.value;
wrapper.appendChild(new_element);
}
else {
alert("You must enter at least 1 character.");
}
}
您的
initinitdocument.getElementById("addBut").addEventListener("click", addItem);