1
我想創建一個使用JavaScript的列表。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的？ – alexn
，因爲我把這麼多努力放在這哈哈..試圖理解javascript方法。我剛剛開始學習jQuery，並不知道如何使用它來編寫腳本。會不會更復雜？ – Todd
@Todd，對於將來的問題，請考慮製作更小的示例（HTML比單獨使用JavaScript更困難，但也可以幫助您理解問題）。也請看格式化示例，以便至少不需要水平滾動（即刪除多餘的空格，如果可能，請使用tab = 2空格）。並且清理掉不相關的/無約束的註釋（包括像'//變量x獲取上面元素的innerhtml'那樣的重複代碼：'var x = y.innerHTML'）。 –