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

时间:2018-08-20 12:06:55

标签: javascript arrays

我已经按照所有学习者的意愿在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”,但结果为然后,-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>

提前谢谢!

1 个答案:

答案 0 :(得分:0)

更改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;