0

为什么永远调用函数 myFunction ，LIST 正在更新，如控制台所示，但本地存储仅显示 LIST 的第一个元素。// ? 这是为了创建一个待办事项列表，在其中我将元素（按钮和 p）添加到节点元素并将其附加到列表中。我如何将列表存储在本地存储中？？？

 let list = document.getElementById("myList");
 let input = document.getElementById("input");     
 let id = 0;
 let LIST = [];
 const month = ["Jan", "Feb", "Mar", "April", "May", "Jun", "July", "Aug", 
 "Sept", "Oct", "Nov", "Dec"];
 let today = new Date();
 document.getElementById("date").innerHTML = today.getDate() + " " + 
 month[today.getMonth()] + " " + today.getFullYear();

    document.addEventListener("keyup", function () {
    if (event.keyCode == 13) {
        if (input.value) {
         myFunction();
         }
       }
    });

 function myFunction() {

  if (input.value) {
  var remove = document.createElement('button');
  remove.classList.add("remove");
  remove.innerHTML += `<i class="fa fa-trash"></i>`;
  remove.addEventListener("click", function () {
    if (this.className == "remove") {
       this.parentNode.parentNode.removeChild(this.parentNode);
    }
  });

  let complete = document.createElement("button");
  complete.classList.add("complete");
  complete.innerHTML += `<i class="fa fa-circle-thin"></i>`;
  complete.addEventListener("click", function () {
    if (this.className == "complete") {
       complete.innerHTML = "";
       complete.innerHTML += `<i class="fa fa-check-circle"</i>`;
       complete.parentNode.firstChild.style.textDecoration = "line- 
      through";
       complete.classList.remove("complete");
       complete.classList.add("done");
    }
     else if (this.className == "done") {
      complete.innerHTML = "";
      complete.innerHTML += `<i class="fa fa-circle-thin"></i>`;
       complete.parentNode.firstChild.style.textDecoration = "";
      complete.classList.remove("done");
      complete.classList.add("complete");
    }
  });

  var node = document.createElement("LI");
  var text = document.createElement("span");
  text.innerText = input.value;
  node.appendChild(text);
  node.appendChild(complete);
  list.appendChild(node);
  node.appendChild(remove);
  LIST.push(node.innerHTML);
  localStorage.setItem("hey", JSON.stringify(LIST));
  input.value = "";
  }
}

 function removeall() {
 localStorage.clear();
 document.getElementById("myList").innerHTML = "";
}
4

0 回答 0