Question

我一遍又一遍地遇到相同的问题：添加任务时，它会正确添加到localStorage中。但是，一旦我有多个任务，并且在随机任务上单击“完成”，有时就会发生LocalStorage在任务之前或之后删除任务的情况。我不知道如何使它工作。

let addBtn = document.getElementById("addButton");
let textInput = document.getElementById("textInput");
let mainList =  document.getElementById("mainList");
let storage = JSON.parse(localStorage.getItem("toDos")) || [];

if (storage.length != 0){
  for (let i=0; i<storage.length;i++){
    addTask(mainList, storage[i]);
  };
};

function addTask(list,task){
	var newTask = document.createElement("li");
	newTask.textContent=task
  newTask.className="task d-flex justify-content-between list-group-item bg-primary mt-2";
  addCompleteBtn(newTask);
  list.appendChild(newTask);
}

function addCompleteBtn (newTask){
  let completeBtn = document.createElement("button");
  completeBtn.className="btn btn-success completeBtn";
  completeBtn.textContent="Completed";
  newTask.appendChild(completeBtn);
};

  addBtn.addEventListener("click", ()=>{
  if(textInput.value === ""){
    alert("Error: The field is either empty or you entered more than 100 characters!");
  }else{
    storage.push(textInput.value);      
    addTask(mainList, textInput.value);
    textInput.value="";
    localStorage.setItem("toDos",JSON.stringify(storage));
  };
});
    
mainList.addEventListener("click",(evt)=>{
    if (evt.target.className==="btn btn-success completeBtn") {
       let listItem = evt.target.parentNode;
       let mainUl = listItem.parentNode;
       let toBeRemoved = listItem.textContent;
       storage.splice(storage.indexOf(toBeRemoved),1);
       mainUl.removeChild(listItem);
       localStorage.setItem("toDos",JSON.stringify(storage));
	};
});

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>To-do-list App</title>
  </head>
  <body>
  <div class="jumbotron bg-info">
  <div class="container">
    <h1 class="display-4 text-center">Task List</h1>
    <p class="lead text-center">Click on the Add button to add a task</p>
  </div>
</div>
<div class="container">
  <div class="firstInput input-group mb-5">
    <div class="input-group-prepend">
      <button class="btn btn-primary" type="button" id="addButton">Add Task</button>
    </div>
    <input type="text" title='Enter a Task' class="form-control" id="textInput" maxlength="200">
    </div>
  </div>
      <ul class='tasksList container' id="mainList">
      </ul>
    <script src="script.js"></script>
  </body>
</html>

Shows all the values in the LocalStorage

Once task 2 is removed, task 3 is removed from the Storage instead

这是导致我出现问题的特定部分：

mainList.addEventListener("click",(evt)=>{
    if (evt.target.className==="btn btn-success completeBtn") {
       let listItem = evt.target.parentNode;
       let mainUl = listItem.parentNode;
       let toBeRemoved = listItem.textContent;
       /* This is the part of code causing me issues
       storage.splice(storage.indexOf(toBeRemoved),1);
       */
       mainUl.removeChild(listItem);
       localStorage.setItem("toDos",JSON.stringify(storage));
	};
});

Answer 1

问题出在let toBeRemoved = listItem.textContent;，这将返回该li中所有元素的文本内容。因此，如果您添加一个名为“任务1”的任务，则当您按下“完成”时，toBeRemoved的值将为Task 1Completed，因为这也会返回该按钮的文本，因为您的按钮是该按钮的子代。 li。

因此，将let toBeRemoved = listItem.textContent;更改为let toBeRemoved = listItem.childNodes[0].nodeValue;，您应该会很好，这只会得到li的文本。

LocalStorage删除错误的值

1 个答案: