javascript - 完成一个项目会为其添加两个新行，而它本身的函数中没有这样的东西

Question

在观看教程后，我自己重新创建了一个待办事项列表，一切正常，至少 99% 正常。只有一个小问题，没有什么问题，但这让我很困扰，因为我无法在函数中找到问题的根源，即使我已经使用调试器缩小了范围。问题本身是，每当我在待办事项列表中将一个项目标记为“已完成”时，它就会向其中添加两个新的空行(就像有人确实单击了 Enter x2，这就是它在控制台日志中显示的方式)。这个问题发生在“每个项目”上，所以它不像我将一个项目标记为已完成，它会为每个项目添加两个新行，但仅添加到被标记/未标记的项目。这是一段代码，其中包含我应该将其范围缩小到的功能:

function completeItem(){
    const item = this.parentNode.parentNode;
    const parent = item.parentNode;
    const id = parent.id;
    const value = item.innerText;

    if(id === "todo"){
        data.todo.splice(data.todo.indexOf(value), 1)
        data.completed.push(value);

        // Notification.
        notification.innerHTML = "<p>Task completed.</p>";
        notification.classList.add("notification");
        notification.classList.add("notificationCompleted");
        setTimeout(() => {
            notification.classList.remove("notification");
            notification.classList.remove("notificationCompleted");
            notification.innerHTML = "";
        }, 2000);
    } else {
        data.completed.splice(data.completed.indexOf(value), 1);
        data.todo.push(value);
    }
    dataObjectUpdate();
    console.log(data);

    const target = (id === "todo") ? document.getElementById("completed"):document.getElementById("todo");

    parent.removeChild(item);
    target.insertBefore(item, target.childNodes[0]);
}

如果需要的话，这里还有 hastebin 上整个脚本文件的链接: https://hastebin.com/kuwomiqazu.cs 。 这是展示该问题的 codepen 的链接: https://codepen.io/pecko95/pen/XBpoGr 提前致谢。

Answer 1

textContent returns the text content of all elements, while innerText returns the content of all elements, except for <script> and <style> elements.

如果您使用textContent，错误将得到修复。