1
ユーザーが自由にタスクを追加したり削除したりすることができる単純なタスクリストを作成しようとしていますが、削除機能に苦労しています。私はそれが数字かどうかを確認するためにユーザー入力を検証し、次にその要素を配列から削除する必要があります。プログラムをテストすると、番号を入力しても入力が無効であるという警告が表示されます。私は間違って何をしていますか？私のjavascriptコードで有効性チェックが機能しない
(function(){
\t // Variable that stores the tasks:
var tasks = [];
\t // Function called when the form is submitted.
\t // Function adds a task to the global array.
function addTask() {
'use strict';
var task = document.getElementById('task');
var output = document.getElementById('output');
var message = '';
if (task.value) {
tasks.push(task.value);
message = '<h2>To-Do</h2><ol>';
for (var i = 0, count = tasks.length; i < count; i++) {
message += '<li>' + tasks[i] + '</li>';
}
message += '</ol>';
output.innerHTML = message;
} // End of task.value IF.
\t // Return false to prevent submission:
return false;
} // End of addTask() function.
\t
\t function deleteTask(){
\t \t 'use strict';
\t \t var deleteElement = prompt('Which task would you like to delete?', 'Enter task number');
\t \t
\t \t var message = '';
\t \t
\t \t //check validity of input
\t \t if((typeof deleteElement == 'number')){
\t \t \t
\t \t \t var index = tasks.index0f(deleteElement);
\t \t \t if (index > -1){
\t \t \t \t tasks.splice(index, 1);
\t \t \t }
\t \t \t
\t \t \t /*document.getElementById('output') = '';
\t \t \t message = '<h2>To-Do</h2><ol>';
for (var i = 0, count = tasks.length; i < count; i++) {
message += '<li>' + tasks[i] + '</li>';
}
message += '</ol>';
output.innerHTML = message;*/
\t \t }
\t \t else{
\t \t \t alert('Input must be a number');
\t \t }
\t \t return false;
\t }
// Initial setup:
function init() {
'use strict';
document.getElementById('add_task').onclick = addTask;
\t \t document.getElementById('delete').onclick = deleteTask;
} // End of init() function.
window.onload = init;
})();/*
dark blue: 212B40
gray-blue: 547B97
gray-green-blue: BADCDD
light-green: C2E078
*/
/*
dark blue: 1B1D26
dark green: 425955
gray-green: 778C7A
off-white: F1F2D8
tan: BFBD9F
*/
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #1b1d26;
background-color: #f1f2d8;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
form{
margin:0 auto;
width:400px;
padding:14px;
background-color: #ffffff;
border:solid 2px #425955;
}
/* ----------- stylized ----------- */
h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
h2 {
\t clear: both;
}
p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #BFBD9F;
padding-bottom:10px;
}
label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
.small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #BFBD9F;
width:200px;
margin:2px 0 20px 10px;
}
#add_task, #delete{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#F1F2D8;
text-align:center;
line-height:20px;
color:#000000;
font-size:12px;
font-weight:bold;
}
#output {
\t clear:both;
\t margin-bottom: 10px;
\t color: blue;
}<head>
<meta charset="utf-8">
<title>To-Do List</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/todo.css">
</head>
<body>
<!-- Script 6.5 - task.html -->
<!-- <form action="#" method="post" id="theForm">-->
<div id="form"
<fieldset><legend>Enter an Item To Be Done</legend>
<div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
<input type="button" value="Add a task" id="add_task">
\t \t \t <input type="button" value="Delete task" id="delete">
\t \t <div id="output"></div>
</fieldset>
\t </div>
<!--</form>-->
<script src="js/todo.js"></script>
</body>
</html>
数値が配列内に存在するかどうかを確認しますか？配列インデックスも0から始まります。 – codemirror