我正在尝试创建一个简单的任务列表，用户可以在其中随意添加和删除任务，但我在删除功能方面遇到困难。我需要验证用户输入以检查它是否是数字，然后继续从数组中删除该元素。当我测试我的程序时，即使我输入一个数字，我也会收到警告，说我的输入无效。我做错了什么？
(function(){
// Variable that stores the tasks:
var tasks = [];
// Function called when the form is submitted.
// 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.
// Return false to prevent submission:
return false;
} // End of addTask() function.
function deleteTask(){
'use strict';
var deleteElement = prompt('Which task would you like to delete?', 'Enter task number');
var message = '';
//check validity of input
if( (typeof deleteElement == 'number') ){
var index = tasks.index0f(deleteElement);
if (index > -1){
tasks.splice(index, 1);
}
/*document.getElementById('output') = '';
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;*/
}
else{
alert('Input must be a number');
}
return false;
}
// Initial setup:
function init() {
'use strict';
document.getElementById('add_task').onclick = addTask;
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 {
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 {
clear:both;
margin-bottom: 10px;
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">
<input type="button" value="Delete task" id="delete">
<div id="output"></div>
</fieldset>
</div>
<!--</form>-->
<script src="js/todo.js"></script>
</body>
</html>最佳答案
even if I input a number, I'll get the alert saying that my input is invalid.
提示以字符串格式输入输入的文本，因此其类型为字符串。 这不是检查用户是否输入数字的正确方法。
正确的做法是，有实用功能
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
然后检查
if( (isNumber(deleteElement)){
---
关于javascript - 有效性检查在我的 javascript 代码中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42505628/