Question

所以，我是网络开发人员的新手，并试图通过编写一个来解决JavaScript ...是的，你猜对了，一个待办事项清单。

我一直在尝试将项目设置为本地存储，然后检索它，它可以分类，但是当检索到列表项时，按钮似乎不起作用，我可以＆＃39;为我的生活找出原因......有什么想法吗？这是代码：

    document.addEventListener('DOMContentLoaded', () => {
  const submitButton = document.querySelector('.submit');
  submitButton.type = 'submit';
  const inputField = document.querySelector('.createItem');
  const toDoUl = document.querySelector('.toDoUl');
  const completedUl = document.querySelector('.completedUl');
  const form = document.querySelector('#header');
  const tdContainer = document.getElementById('tdContainer');
  const toDoItems = document.getElementById('toDoItems');
  (function loadStorage() {
    if (localStorage.getItem('todo')) {
      tdContainer.innerHTML = localStorage.getItem('todo');
    }
  })();

  function noChildren() {
    if (toDoUl.hasChildNodes()) {
      tdContainer.classList.remove('tdContainer');
    } else {
      tdContainer.className = 'tdContainer';
    }
  }

  function createLi() {
    const wrapper = document.getElementById('wrapper');
    const doneButton = document.createElement('input');
    const checkedLabel = document.createElement('label');
    doneButton.type = 'checkbox';
    checkedLabel.className = 'done';
    checkedLabel.appendChild(doneButton);
    const listItem = document.createElement('li');
    const p = document.createElement('p');
    const editButton = document.createElement('button');
    const removeButton = document.createElement('button');

    toDoUl.appendChild(listItem);
    p.textContent = inputField.value;
    inputField.value = '';
    editButton.className = 'edit';
    removeButton.className = 'remove';
    listItem.appendChild(checkedLabel);
    listItem.appendChild(p);
    listItem.appendChild(editButton);
    listItem.appendChild(removeButton);
    doneButton.style.display = 'none';

    editButton.addEventListener('click', () => {
      listItem.contentEditable = 'true';
    });

    listItem.addEventListener('blur', () => {
      listItem.contentEditable = 'false';
    });

    removeButton.addEventListener('click', e => {
      const ul = e.target.parentNode.parentNode;
      /*const li = e.target.parentNode.parentNode;*/
      ul.removeChild(e.target.parentNode);
      noChildren();
    });

    doneButton.addEventListener('click', e => {
      if (e.target.parentNode.parentNode.parentNode.className === 'toDoUl') {
        completedUl.appendChild(e.target.parentNode.parentNode);
        e.target.parentNode.parentNode.className = 'removeTransition';
        noChildren();
        localStorage.setItem('todo', tdContainer.innerHTML);
      } else {
        toDoUl.appendChild(e.target.parentNode.parentNode);
        e.target.parentNode.parentNode.className = 'addTransition';
        noChildren();
      }
    });
  }

  form.addEventListener('submit', e => {
    e.preventDefault();
    noChildren();
    createLi();
    localStorage.setItem('todo', tdContainer.innerHTML);
  });
});

您可以在此处查看工作版本：http://kozyrev.site/todo/

Answer 1

我很高兴你在写箭头功能和很酷的东西：D

但似乎您正在createLi函数中设置事件侦听器，该事件侦听器将在表单的submit事件中调度。

但是，当您加载localStorage时，正在设置HTML内容：

tdContainer.innerHTML = localStorage.getItem('todo');

事件侦听器未附加到它们，因为您从localStorage创建的所有这些元素都不是由createLi函数创建的：（

但你可能会这样写：

// loads from localStorage
(function loadStorage() {
  if (localStorage.getItem('todo')) {
    tdContainer.innerHTML = localStorage.getItem('todo');
  }
})();

// set listeners below
var liSelector = '.toDoUl > li'
var liElements = document.querySelectorAll(liSelector)

Array.prototype.forEach.call(liElements, (liElement) => {
  var editButton = liElement.querySelector('.edit')
  console.log(editButton)
  // you can set listeners here
  editButton.addEventListener('click', (e) => {
    e.preventDefault()
    console.log('yey, event has dispatched, do your magic :)')
  })
})

UPDATE：使用命名函数重用它们的示例：

function createLi() {
....
    const listItem = document.createElement('li');
    ....
    editButton.addEventListener('click', () => {
      listItem.contentEditable = 'true';
    });

可以这样写 //此函数位于脚本顶部 const setEditable =（listItem）=＆gt; { listItem.contentEditable ='true'; }

// you can use setEditable within createLi
function createLi() {
....
    const listItem = document.createElement('li');
    ....
    editButton.addEventListener('click', () => {
      setEditable(listItem)
    });

此外，在从localStorage编写HTML之后

// loads from localStorage
(function loadStorage() {
  if (localStorage.getItem('todo')) {
    tdContainer.innerHTML = localStorage.getItem('todo');
  }
})();

// set listeners below
var liSelector = '.toDoUl > li'
var liElements = document.querySelectorAll(liSelector)

Array.prototype.forEach.call(liElements, (listItem) => {
  var editButton = listItem.querySelector('.edit')
  // you can set listeners here
  editButton.addEventListener('click', (e) => {
    setEditable(listItem)
  })
})

我没有测试，但我希望它能正常工作，它会告诉你命名函数可以重用来设置监听器：）

从本地存储中检索的按钮不起作用

1 个答案: