2

我正在尝试添加另一个按钮，该按钮将从列表中删除任务，并允许用户删除其中任何一个。我正在尝试将 splice 与 indexOf 一起使用，但到目前为止它还没有工作。这是代码。谢谢您的帮助。

// tasks.js #2
// This script manages a to-do list.

// Need a global variable:
var tasks = [];

// Function called when the form is submitted.
// Function adds a task to the global array.
function addTask() {
'use strict';

// Get the task:
var task = document.getElementById('task');

// Reference to where the output goes:
var output = document.getElementById('output');

// For the output:
var message = '';

if (task.value) {

    // Add the item to the array:
    tasks.push(task.value);

    // Update the page:
    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() {
var inputTask = document.getElementById('task');
var taskLength = inputTask.length;

var i = array.indexOf("inputTask");
if (i != -1) {
    array.splice(i, taskLength);
}

}
// Initial setup:
function init() {
    'use strict';
    //document.getElementById('theForm').onsubmit = addTask;

    var elem1 = document.getElementById("submit");
    elem1.addEventListener("click", addTask, false);

   var elem2 = document.getElementById("delete");
    elem2.addEventListener("click", deleteTask, false);
} // End of init() function.
window.onload = init;
4

3 回答 3

1

如果你想以与构建deleteTask相同的方式构建函数addTask，则需要实现以下算法：

1) find the task element in DOM and get its value
2) check whether or not the value is in the `tasks` array
3) if it's there, remove it

这是执行此操作的一种方法：

function deleteTask() {
  // 1
  var taskEl    = document.getElementById('task');
  // 2
  var taskIndex = tasks.indexOf(taskEl.value);
  if (taskIndex !== -1) {
    // 3
    tasks.splice(taskIndex, 1);
  }
  return false;
}

不过，在实践中，我可能会采取不同的方式。目前addTask并且deleteTask有相同的代码来收集这个任务的值，但它是可以预防的——只需将检索值的代码提取到一个单独的操作中（命名为类似的东西getCurrentTask）并让这些方法与taskparam 一起工作。

于 2013-09-11T14:56:07.043 回答
1

您在变量中存储对元素#inputTask 的引用，inputTask然后尝试获取"inputTask"数组中字符串的索引array（不存在，正如@Frits 在评论中提到的那样）。

然后你尝试用索引拼接数组，它的长度inputTask没有长度，因为它是一个元素，如果它是一个字符串，为什么要使用它的长度来拼接？

Splice 删除（和添加）元素：第一个参数是要删除的第一个元素的索引，第二个参数是要从数组中删除的元素的数量。所以如果你想删除一个元素，它应该看起来像array.splice(index, 1)

于 2013-09-11T15:00:55.597 回答
1 
const array = ["a", "b", "c", "d"];

const index = array.indexOf("c");

if (index > -1) {
  array.splice(index, 1);
}

console.log(array); // ["a","b","d"]
于 2021-11-26T05:33:54.350 回答