Question

我正在尝试创建一个简单的任务列表，用户可以随意添加和删除任务，但我很难使用删除功能。我需要验证用户输入以检查它是否为数字然后继续从数组中删除该元素。当我测试我的程序时，即使我输入了一个数字，我也会收到警告，说我的输入无效。我做错了什么？

(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>

Answer 1

即使我输入了一个号码，我也会收到警告说我的输入无效。

提示以字符串格式提供输入的文本，因此类型为String。这不是检查用户输入号码的正确方法。

正确的方法是，具有效用函数

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

然后检查

if( (isNumber(deleteElement)){
---

Answer 2

您也可以尝试将数字包装在parseInt（）中。这应该是一个数字值，以防它被保存为数组中的字符串。

有效性检查不适用于我的JavaScript代码

2 个答案: