待办事项计数器的问题答案

【问题标题】：Issue with todo counter待办事项计数器的问题
【发布时间】：2018-06-18 22:46:58
【问题描述】：

您好，我有一个基本的待办事项，但我遇到了一个问题，如果用户单击已完成的待办事项然后将其删除，则显示剩余待办事项数量的计数器会减少两次。有没有办法防止这种情况？

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/

【问题讨论】：

标签： javascript jquery counter

【解决方案1】：

if 语句中的条件当true 触发.completed CSS 类并且todoCounter 递减或递增（单击li 标签时切换），当它递减时没有（代码）检查父节点是否处于completed状态，当点击删除button时，不要为同一个todo递减计数器两次。

这是您可以添加的代码片段，以确保检查父节点的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;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Todo</title>
    </head>
    <body>
        <div id="todo-counter"></div>
        <input type="text" id="new-todo"/>
        <ul id="todos"></ul>
    </body>
</html>

【讨论】：

IMO 考虑到有一些信息，您应该提供比“问题出在 if 语句中”更多的信息。您还应该解释他们的行为导致问题的原因，以便他们从中吸取教训，而不仅仅是学习复制和粘贴解决方案
感谢@Marie，考虑到我对 Stackoverflow 有点陌生，我保证下次提供解决方案时会更详细。再次感谢（：
欢迎来到 SO。请记住 StackOverflow 是一个 QA 存档。你的目标不应该只是帮助 OP，而是帮助未来的开发人员解决类似的问题。考虑到这一点，您可以并且应该编辑此答案以提供更多详细信息。
我已经编辑了我的答案玛丽，让我知道你的想法。再次感谢。