Question

我正在尝试添加另一个按钮，该按钮将从列表中删除任务，并允许用户删除其中任何一个。我试图使用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;

Answer 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）并使这些方法适用于task param。

Answer 2

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

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

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

使用JavaScript splice / indexOf从数组中删除项目

2 个答案: