Question

我正试图（重新）自学js，制作一个待办事项列表应用程序，以帮助保持我父亲的老板井井有条。这是一个纯粹的客户端项目，并且他是唯一将使用它的人（它将在chrome中打开，因为我也在使用HTML）。

我一直在阅读本地存储，并且一直在查看其他人的代码并观看教程以了解如何使用它，但是我一直在努力。第二对还是真的可以帮上我的忙，因为我已经三年没有使用js了！

（不是要找人为我编写代码，只是需要一些帮助来发现我的错误）

\\\
loadEvents();
// load every event in the page
function loadEvents(){
  document.querySelector('form').addEventListener('submit',submit);
  document.getElementById('clear').addEventListener('click',clearList);
  document.querySelector('ul').addEventListener('click',deleteOrTick);

// sets up local storage for the list

 let itemsArray = []

localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))

}

// submit data function
function submit(e){ 
  e.preventDefault();
  let taskList;
  let input = document.querySelector('input');
  if(input.value != '')
    addTask(input.value);
  input.value = '';
}

// add tasks to list
function addTask(task){
  let ul = document.querySelector('ul');
  let li = document.createElement('li');
  li.innerHTML = `<span class="delete">×</span><input type="checkbox"><label>${task}</label>`;
  ul.appendChild(li);
  document.querySelector('.tasksBoard').style.display = 'block';
}

// Add to local storage

form.addEventListener('submit', function(e) {
  e.preventDefault()

  itemsArray.push(input.value)
  localStorage.setItem('items', JSON.stringify(itemsArray))
  liMaker(input.value)
  input.value = ''
})

data.forEach(item => {
  liMaker(item)
})


// clear entire list of tasks
function clearList(e){
  let ul = document.querySelector('ul').innerHTML = '';
}

// remove check from checked off tasks and remove red strike through
function deleteOrTick(e){
  if(e.target.className == 'delete')
    deleteTask(e);
  else {
    tickTask(e);
  }
}

// delete single task
function deleteTask(e){
  let remove = e.target.parentNode;
  let parentNode = remove.parentNode;
  parentNode.removeChild(remove);
}

// check off single task and strike through red
function tickTask(e){
  const task = e.target.nextSibling;
  if(e.target.checked){
    task.style.textDecoration = "line-through";
    task.style.color = "#ff0000";
  }else {
    task.style.textDecoration = "none";
    task.style.color = "#2f4f4f";
  }
}

///

无法将UL保存到本地存储（js）

0 个答案: