使用拼接从数组中删除错误的值

Question

我已经用 Javascript 构建了一个待办事项列表应用程序，因为所有学习者都会在某个时候这样做，并且我正在尝试使用本地存储来存储应用程序关闭或刷新时的值。我将它们存储在这些空数组中：

var data = (localStorage.getItem('todolist')) ? 
JSON.parse(localStorage.getItem('todolist')):{
    todo: [],
    completed: []
};

为此，每当将一个元素添加到列表中时，它都会进入待办事项列表及其数组，完成后，应将其从待办事项数组中删除并添加到已完成的数组中。我已经使用 if 语句完成了这项工作：

if (id === 'todo') {
    data.todo.splice(data.todo.indexOf(value), 1);
    data.completed.push(value);
  } else {
    data.completed.splice(data.completed.indexOf(value), 1);
    data.todo.push(value);
  }

但是，我不确定为什么，存储在数组中的值似乎以错误的顺序移动，例如如果值 'a','b','c' 在待办事项数组中，将 'a' 列表项从待办事项移动到完成，将导致完成的数组获得 'a' 但 to -do 数组然后删除“c”，而在存储中保留“a”重复。

我在 if 语句中有 console.log(indexOf(value)) 导致 -1，我不明白为什么，因为数组确实包含数字并且它是在此之前创建和填充的。任何帮助我指出我哪里出错了，我们将不胜感激。这是我的代码：

var data = (localStorage.getItem('todolist')) ? 
JSON.parse(localStorage.getItem('todolist')):{
    todo: [],
    completed: []
};

renderTodoList();


//User clicked on add, adding any text in input field to to-do field.
document.getElementById('add').addEventListener('click', function(){
var value = document.getElementById('item').value;
if (value){
    addItem(value);
};
});

document.getElementById('item').addEventListener('keydown', function (e){
var value = this.value;
if (e.code === 'Enter' && value){
    addItem(value);
}
});

function addItem(value) {
addItemToDOM(value);
document.getElementById('item').value = '';

data.todo.push(value);
dataObjectedUpdated();
}

//Render list from memory.
function renderTodoList() {
if (!data.todo.length && !data.completed.length) return;

for (var i = 0; i <data.todo.length; i++){
    var value = data.todo[i];
    addItemToDOM(value);
}

for (var j = 0; j <data.completed.length; j++) {
    var value = data.completed[j];
    addItemToDOM(value, true);
}
}

function dataObjectedUpdated() {
localStorage.setItem('todolist', JSON.stringify(data));
console.log(data);
}

//Delete's item from list.
function removeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var value = item.innerText;

if (id === 'todo'){
    data.todo.splice(data.todo.indexOf(value), 1);
} else {
    data.completed.splice(data.completed.indexOf(value), 1);
}
console.log(value);
dataObjectedUpdated();

parent.removeChild(item);
}

//When item is completed or uncompleted - moving between lists.
function completeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;  
var id = parent.id;
var value = item.innerText;


if (id === 'todo') {
    data.todo.splice(data.todo.indexOf(value), 1);
    data.completed.push(value);
  } else {
    data.completed.splice(data.completed.indexOf(value), 1);
    data.todo.push(value);
  }
dataObjectedUpdated();


//Check if item should be added to todo or completed list
var target = (id === 'todo') ? document.getElementById('completed'): document.getElementById('todo');

parent.removeChild(item);
target.insertBefore(item, target.childNodes[0]);
}

//Add item to DOM list
function addItemToDOM(text, completed){

var list = (completed) ? document.getElementById('completed') : document.getElementById('todo');

var item = document.createElement('li');
item.innerText = text;

var buttons = document.createElement('div');
buttons.classList.add('buttons');

var remove = document.createElement('button');
remove.classList.add('remove');
remove.innerHTML = removeSVG;

//Add click event for removing an item
remove.addEventListener('click', removeItem);


var complete = document.createElement('button');
complete.classList.add('complete');
complete.innerHTML = completeSVG;

//Add click event for completing an item
complete.addEventListener('click', completeItem);

buttons.appendChild(remove);
buttons.appendChild(complete);
item.appendChild(buttons);

list.insertBefore(item, list.childNodes[0]);
}

并包含在我的正文 HTML 中：

<div class="container">
<!-- Incomplete tasks --->
<ul class="todo" id="todo"></ul>

<!--Completed tasks-->
<ul class="todo" id="completed"></ul>
</div>

提前谢谢你！

Answer 1

更改addToDom 函数以将您的文本保留在指定元素内，例如span。此外，当您尝试获取 innerText 时，您应该从这个 span 获取它。

这是你addToDom函数的变化：

var item = document.createElement('li'); var span = document.createElement('span'); span.innerText = text; item.append(span);

在您的 completeItem 函数中，您应该将 value 变量更改为：

var value = item.getElementsByTagName('span')[0].innerText;