[英]Using splice is removing wrong value from array
I have built a to-do list app in Javascript as all learners will at some point, and I am attempting to use local storage to store the values when the app is closed or refreshed. 我已经用所有的学习者在某个时候用Javascript构建了一个待办事项列表应用程序,并且我试图在关闭或刷新应用程序时使用本地存储来存储值。 I'm storing them in these empty arrays:
我将它们存储在这些空数组中:
var data = (localStorage.getItem('todolist')) ?
JSON.parse(localStorage.getItem('todolist')):{
todo: [],
completed: []
};
To do this, whenever an element is added to the list, it goes onto the to-do list and it's array, and when completed, it should be removed from the to-do array and added to the completed one. 为此,每当元素添加到列表中时,它就会进入待办事项列表及其数组,完成后应将其从待办事项数组中删除并添加到已完成的数组中。 I've done this using an if statement:
我使用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);
}
However, I'm not sure why, the values stored in the array seem to be getting moved in the wrong order eg if values 'a','b','c' are in the to-do array, moving over the 'a' list item from to-do to completed, will result in the the completed array gaining 'a' but the to-do array then removes 'c' instead, leaving 'a' duplicated in storage. 但是,我不确定为什么,数组中存储的值似乎以错误的顺序移动,例如,如果值“ a”,“ b”,“ c”在待办事项数组中,则移至“从待办事项到完成的“ a”列表项将导致已完成的数组获得“ a”,但是待办事项数组随后删除“ c”,而将“ a”重复存储。
I've console.log(indexOf(value)) in the if statement which is resulting in -1, which I cannot understand why because the array does contain the number and it is created and filled before this point. 我在if语句中得到了console.log(indexOf(value)),结果为-1,我不明白为什么,因为数组确实包含该数字,并且在此之前创建并填充了该数字。 Any help to point me towards where I'm going wrong would be massively appreciated.
任何帮助我指出我要去哪里的帮助将不胜感激。 Here is my code:
这是我的代码:
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]);
}
And contained in my body HTML: 并包含在我的体内HTML:
<div class="container">
<!-- Incomplete tasks --->
<ul class="todo" id="todo"></ul>
<!--Completed tasks-->
<ul class="todo" id="completed"></ul>
</div>
Thank you in advance! 先感谢您!
Change the addToDom
function to keep your text within a specified element like span . 更改
addToDom
函数以将文本保持在诸如span之类的指定元素内 。 Also when your're trying to get the innerText
, you should get it from this span . 另外,当您尝试获取
innerText
,也应该从这个范围中获取它。
This is the changes of your addToDom
function: 这是您的
addToDom
函数的更改:
var item = document.createElement('li'); var span = document.createElement('span'); span.innerText = text; item.append(span);
In your completeItem function, you should change the value
variable to this: 在您的completeItem函数中,您应该将
value
变量更改为此:
var value = item.getElementsByTagName('span')[0].innerText;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.