【发布时间】：2012-06-13 17:38:14
【问题描述】：
我正在尝试仅使用 javascript 创建一个待办事项列表。
我希望用户能够将任务添加到他们的待办事项列表中，然后按优先级值（低、中或高）排序。我正在附加用户输入，但不是我想要的格式。我想输出一条新记录，其中包含<li> 元素内的新标签、新复选框输入和优先级的新选择字段。
我开始迷路了，我认为我的脚本过于复杂了，有人对如何创建新元素并将它们附加到我的 <ul> 有任何建议吗？
<!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>
【问题讨论】：
-
请问你为什么不用jQuery？
-
因为我为此付出了很多努力哈哈.. 试图理解 javascript 方法。我刚刚开始学习 jQuery，还不知道如何用它编写脚本。会不会复杂很多？
-
@Todd，对于未来的问题，请考虑制作更小的示例（使用 HTML 比仅使用 JavaScript 更难，但也可以帮助您理解问题）。还要查看格式化示例，至少它不需要水平滚动（即删除多余的空格，如果可能，使用 tab=2 空格）。并清除未实现/未定义的 cmets（包括像
// variable x gets the innerhtml of the element above这样重复代码的 cmets：var x=y.innerHTML）。
标签： javascript forms appendchild createelement