Javascript—如何将用户输入附加到表单中的新列表项。（如何添加记录）
我正在尝试使用javascript创建一个待办事项列表 我希望用户能够将任务添加到他们的待办事项列表中，然后按优先级值排序，可以是低、中或高。我正在附加用户输入，但不是我想要的格式。我想输出一条新记录，其中包含Javascript—如何将用户输入附加到表单中的新列表项。（如何添加记录）,javascript,forms,appendchild,createelement,Javascript,Forms,Appendchild,Createelement,我正在尝试使用javascript创建一个待办事项列表 我希望用户能够将任务添加到他们的待办事项列表中，然后按优先级值排序，可以是低、中或高。我正在附加用户输入，但不是我想要的格式。我想输出一条新记录，其中包含元素中的新标签、新复选框输入和新的优先级选择字段 我开始迷路了，我认为脚本编写过于复杂了，有人对如何创建新元素并将它们附加到我的中有什么建议吗 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <
中有什么建议吗
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
#myForm{width: 600px; background: red;}
#listContent{clear:both}
legend h3{background:blue; margin-top: 30px;}
#labels {margin-left: 70px; width:690px;}
.listLabels{margin-right: 145px; font-family: sans-serif; font-style: italic; font-size: 20px;}
ul {display: block; width: 500px; background:blue;}
li{clear: both; width: 600px; background: purple; list-style-type: none; padding: 2em 2em;}
.label{display:block; float:left; width: 150px;}
.checkBox{display: block; float: left; margin-left: 55px; width: 100px; color: green;}
.selectPriority{display: block; width: 80px; float: right; color: blue;}
#addMoreContent{clear:both;}
.newLabel{display:block; float:left; width: 100px;}
.inputText{display: block; width: 300px; float: left;}
.addButton{display:block; width: 60px; }
#addSection{position: relative; width: 600px; background: brown; bottom:60px; left: 40px; padding-right: 50px; text-align:right;}
target
</style>
<script language="javascript">
var counter = 0;
function addNewItem(){
// Target the user input
var UserInput = document.getElementById('userInputText').value;
var UserInputString = UserInput.toString();
if (UserInputString==""){
//Display error if field is left blank
alert('Please add an item to the To-Do list.');
}
//Do this if user input is detected
else {
function CreateLiElement() {
var liElement = document.createElement("li");
var labelElement = document.createElement("label");
var checkBoxElement = document.createElement("input");
var selectElement = document.createElement ("select");
var optionElement = document.createElement ("option");
var userOption = document.getElementById ("userOption");
labelElement.setAttribute('class', 'label');
checkBoxElement.setAttribute('type', 'checkBox')
checkBoxElement.setAttribute('class','checkBox');
selectElement.setAttribute('class','selectPriority')
selectElement.setAttribute('name','priority')
optionElement.setAttribute('value',userOption)
liElementItems = labelElement, checkBoxElement, selectElement, optionElement, userOption;
document.body.appendChild(liElementItems);
}
var y=document.getElementById('targetAdd')
// variable x gets the innerhtml of the element above
var x=y.innerHTML
// alert just shows it on the screen. You can do whatever you want with x
alert(x);
alert('the function is complete');
alert(UserInputString);
var element = document.createElement('label'.className='label');
var answer = document.createTextNode(UserInputString);
alert(element)
document.getElementById("listItems").appendChild(element).className=('label');
document.getElementById("listItems").appendChild(answer);
alert('the function is complete');
}
/*
var Priority = new Array(3);
Priority[0] = "High";
Priority[1] = "Medium";
Priority[2] = "Low";
*/
}
</script>
</head>
<body>
<form id="myForm" name="myForm" action="#" method="POST">
<fieldset>
<div id="listContent">
<legend><h3>My Tasks</h3></legend>
<div id="labels">
<span class="listLabels"><strong>To-Do</strong></span>
<span class="listLabels"><strong>Completed</strong></span>
<span class="listLabels"><strong>Priority</strong></span>
</div>
<ul id="listItems" class="listItems"><!-- begin list items -->
<li>
<label class="label">Make Iced Coffee</label>
<input class="checkBox" type="checkBox" name="list1" id="list1" />
<select class="selectPriority" name="priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</li>
<li>
<label class="label">Go take the dog for a run</label>
<input class="checkBox" type="checkBox" name="list2" id="list2" />
<select class="selectPriority" name="priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</li>
<li>
<label class="label">Apply for Jobs</label>
<input class="checkBox" type="checkBox" name="list3" id="list3" />
<select class="selectPriority" name="priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</li>
<li>
<label class="label">Work on JavaScript project</label>
<input class="checkBox" type="checkBox" name="list4" id="list4" />
<select class="selectPriority" name="priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</li>
</ul><!-- end list items -->
</div><!-- end list content -->
<div id="addMoreContent"
<legend><h3>Add Task</h3></legend>
<ul>
<li>
<label class="newLabel" for="addTask">New Task:</label>
<div id="targetAdd">
<input id="userInputText" class="inputText" type="text" />
<select id="userOption" class="selectPriority" name="priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</li>
</ul>
<br><br>
<div id="addSection">
<button id="addItem" class="addButton" type="button" onClick="addNewItem()">Add</button>
</div>
</div><!-- end add Content section -->
</fieldset>
</form>
</body>
</html>
页面标题
#myForm{宽度：600px；背景：红色；}
#listContent{clear:两者}
图例h3{背景：蓝色；页边距顶部：30px；}
#标签{左边距：70px；宽度：690px；}
.listLabels{右边距：145px；字体系列：无衬线；字体样式：斜体；字体大小：20px；}
ul{显示：块；宽度：500px；背景：蓝色；}
li{clear:两者；宽度：600px；背景：紫色；列表样式类型：无；填充：2em 2em；}
.label{显示：块；浮点：左；宽度：150px；}
.复选框{显示：块；浮动：左；左边距：55px；宽度：100px；颜色：绿色；}
.selectPriority{显示：块；宽度：80px；浮点：右；颜色：蓝色；}
#addMoreContent{clear:两者；}
.newLabel{显示：块；浮点：左；宽度：100px；}
.inputText{显示：块；宽度：300px；浮点：左；}
.addButton{显示：块；宽度：60px；}
#addSection{位置：相对；宽度：600px；背景：棕色；底部：60px；左侧：40px；右侧填充：50px；文本对齐：右侧；}
目标
var计数器=0；
函数addNewItem（）{
//以用户输入为目标
var UserInput=document.getElementById（'userInputText'）。值；
var UserInputString=UserInput.toString（）；
如果（UserInputString==“”）{
//如果字段留空，则显示错误
警报（'请将项目添加到待办事项列表'）；
}
//如果检测到用户输入，请执行此操作
否则{
函数CreateLiElement（）{
var liElement=document.createElement（“li”）；
var labelement=document.createElement（“标签”）；
var checkBoxElement=document.createElement（“输入”）；
var selectElement=document.createElement（“选择”）；
var optionElement=document.createElement（“选项”）；
var userOption=document.getElementById（“userOption”）；
setAttribute（'class'，'label'）；
checkBoxElement.setAttribute（'type'，'checkBox'）
setAttribute（'class'，'checkBox'）；
selectElement.setAttribute（'class'，'selectPriority'）
selectElement.setAttribute（'name'，'priority'））
optionElement.setAttribute（'value'，userOption）
liElementItems=标签元素、复选框元素、选择元素、选项元素、用户选项；
文件.body.appendChild（liElementItems）；
}
var y=document.getElementById（'targetAdd'））
//变量x获取上面元素的innerhtml
var x=y.innerHTML
//警报只是在屏幕上显示。你可以用x做任何你想做的事
警报（x）；
警报（“功能已完成”）；
警报（UserInputString）；
var element=document.createElement（'label'.className='label'）；
var answer=document.createTextNode（UserInputString）；
警报（要素）
document.getElementById（“listItems”）.appendChild（元素）.className=（'label'）；
document.getElementById（“listItems”）.appendChild（答案）；
警报（“功能已完成”）；
}
/*
var优先级=新阵列（3）；
优先级[0]=“高”；
优先级[1]=“中等”；
优先级[2]=“低”；
*/
}
我的任务
要做的事
已完成
优先级
-
煮冰咖啡
低
中等
高
-
带狗去跑一跑
低
中等
高