如何使用基本javascript更新任务列表？

Question

I am making a simple task list where I can add/ delete items at will but I'm not sure how to make the output reflect those changes when I try and delete an item? 我正在创建一个简单的任务列表，可以随意添加/删除项目，但是我不确定在尝试删除项目时如何使输出反映这些更改？ Or did I not set up my delete function correctly to delete items from the array? 还是我没有正确设置删除功能以从阵列中删除项目？ I was using the splice method to do this. 我正在使用拼接方法来执行此操作。

 (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'); if (task.value) { tasks.push(task.value); displayList(); } // 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'); //check validity of input if( (isNumber(deleteElement)) ){ for (var counter = 0, length = tasks.length; counter < length; counter++){ if (deleteElement == tasks[counter]){ tasks.splice(tasks[counter] - 1, 1); } } displayList(); } else{ alert('Input must be a number'); } } function displayList(){ var message = ''; 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; } function isNumber(number){ return !isNaN(parseFloat(number)) && isFinite(number); } // Initial setup: function init() { 'use strict'; document.getElementById('add_task').onclick = addTask; document.getElementById('delete').onclick = deleteTask; } // End of init() function. window.onload = init; })();

 <!doctype html> <html lang="en"> <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

First, to delete you do not need loop. 首先，删除不需要循环。

tasks.splice(+deleteElement-1,1)

would do. 会做。 -1 is required as your tasks start from 1 and array start from 0 -1是必需的，因为您的任务从1开始，数组从0开始

Also as an additional check, try 另外，请尝试

if ((isNumber(deleteElement)) && +deleteElement <= tasks.length) {

Error should come if value is not a number or its a number and exceeds limits. 如果value不是数字或其数字并且超出限制，则应该出现错误。 Also you will have to update the message accordingly. 您还必须相应地更新消息。

Also a minor typo: 也是一个小错别字：

<div id="form"

should be 应该

<div id="form">
//            ^

 (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'); if (task.value) { tasks.push(task.value); displayList(); } // 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'); //check validity of input if ((isNumber(deleteElement)) && +deleteElement <= tasks.length) { tasks.splice(+deleteElement-1,1) displayList(); } else { alert('Input must be a valid task number'); } } function displayList() { var message = ''; 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; } function isNumber(number) { return !isNaN(parseFloat(number)) && isFinite(number); } // Initial setup: function init() { 'use strict'; document.getElementById('add_task').onclick = addTask; document.getElementById('delete').onclick = deleteTask; } // End of init() function. window.onload = init; })();

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

如何使用基本javascript更新任务列表？

问题描述

1 个解决方案

解决方案1
4 已采纳 2017-03-01 05:51:13

如何使用基本javascript更新任务列表？

问题描述

1 个解决方案

解决方案1 4 已采纳 2017-03-01 05:51:13

解决方案1
4 已采纳 2017-03-01 05:51:13