todo counter

Question

你好我有一个基本的待办事项，但我遇到一个问题，如果用户点击一个待办事项项目已完成然后删除它，显示剩余多少待办事项的计数器减少两次。有办法防止这种情况吗？

let todoCounter = 0;
counterDisplay = document.querySelector('#todo-counter');

counterDisplay.textContent = `${todoCounter} todos left`;

document.querySelector('#new-todo').addEventListener('keypress', e =>
{
    text = e.target.value;

    if (e.keyCode === 13 || e.which === 13)
  {
    addTodo(text);
    todoCounter++;
    counterDisplay.textContent = `${todoCounter} todos left`;
  }
});

const addTodo = text =>
{
    const todoEl = document.createElement('li');
  const todoText = document.createTextNode(text);
  const deleteButton = document.createElement('button');
  todoEl.appendChild(todoText);
  todoEl.appendChild(deleteButton);
  const todoDom = document.querySelector('#todos');
  todoDom.appendChild(todoEl);
};

document.querySelector('#todos').addEventListener('click', e =>
{
    target = e.target;
  if (!target.matches('button'))
  {
    if(target.matches('li'))
    {
        target.classList.toggle('completed');

      if (target.classList.contains('completed'))
      {
        todoCounter--;
            counterDisplay.textContent = `${todoCounter} todos left`;
      }
      else
      {
        todoCounter++;
        counterDisplay.textContent = `${todoCounter} todos left`;
      }
    }
    return;
  }

  target.parentNode.parentNode.removeChild(target.parentNode);

  todoCounter--;
    counterDisplay.textContent = `${todoCounter} todos left`;
})

https://jsfiddle.net/dk5690/aLn310y2/

Answer 1

if触发true CSS类且.completed递减或递增时，todoCounter语句中的条件（单击{{1 }}标签），当递减时，没有（代码）检查父节点是否处于li状态，当单击删除completed时，对于相同的待办事项，不会对计数器递减两次。

以下是您可以添加以确保检查父节点的button状态（即completed标签）的代码片段。该片段应立即添加到您的li语句结束标记之后，并删除该片段之后的其余代码。

if

下面是重构并运行的代码：

else if (target.matches('button') && target.parentNode.classList.contains('completed')) {
                target.parentNode.parentNode.removeChild(target.parentNode);
            }
            else if (target.matches('button')) {
                target.parentNode.parentNode.removeChild(target.parentNode);
                todoCounter--;
                counterDisplay.textContent = `${todoCounter} todos left`;
            }

			let todoCounter = 0;
			counterDisplay = document.querySelector('#todo-counter');

			counterDisplay.textContent = `${todoCounter} todos left`;

			document.querySelector('#new-todo').addEventListener('keypress', e => {
				text = e.target.value;

				if (e.keyCode === 13 || e.which === 13) {
					addTodo(text);
					todoCounter++;
					counterDisplay.textContent = `${todoCounter} todos left`;

					document.getElementById('new-todo').value = '';
				}
			});

			const addTodo = text => {
				const todoEl = document.createElement('li');
				const todoText = document.createTextNode(text);
				let deleteButton = document.createElement('button');
				// and give it some content
				let deleteContent = document.createTextNode("Delete");
				// add the text node to the newly created button
				deleteButton.appendChild(deleteContent);
				todoEl.appendChild(todoText);
				todoEl.appendChild(deleteButton);
				const todoDom = document.querySelector('#todos');
				todoDom.appendChild(todoEl);
			};

			document.querySelector('#todos').addEventListener('click', e => {
				target = e.target;

				if (target.matches('li')) {
					target.classList.toggle('completed');

					if (target.classList.contains('completed')) {
						todoCounter--;
						counterDisplay.textContent = `${todoCounter} todos left`;
					}
					else {
						todoCounter++;
						counterDisplay.textContent = `${todoCounter} todos left`;
					}
				}
				else if (target.matches('button') && target.parentNode.classList.contains('completed')) {
					target.parentNode.parentNode.removeChild(target.parentNode);
				}
				else if (target.matches('button')) {
					target.parentNode.parentNode.removeChild(target.parentNode);
					todoCounter--;
					counterDisplay.textContent = `${todoCounter} todos left`;
				}
			});

.completed {
            text-decoration: line-through;
}