JavaScriptだけを使ってやることリストを作成しようとしています。
ユーザーが To Do リストにタスクを追加し、優先度の値 (低、中、高) で並べ替えられるようにしたいと考えています。ユーザー入力を追加していますが、希望する形式ではありません。<li>要素内に新しいラベル、新しい checkBox 入力、および優先度の新しい選択フィールドを含む新しいレコードを出力したいと考えています。
私は道に迷い始めており、スクリプトを複雑にしすぎていると信じています。新しい要素を作成して私の<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>