如何使用保存按钮创建多个 todolist？答案

【问题标题】：How to create multiple todolists using a save button?如何使用保存按钮创建多个 todolist？
【发布时间】：2021-01-31 09:12:30
【问题描述】：

下面是我的一些代码的 sn-p。想想类固醇的待办事项列表。我正在尝试创建多个 Div 元素，每次按下“保存”按钮时，这些元素都会保存到包含不同列表的页面。实际发生的是显示多个 div，但保存的原始 div 是唯一使用列表信息（就像在待办事项列表中单击提交时出现的新列表项一样，我添加了一个保存按钮和一个输入字段，用户可以使用它来命名他们的列表并将该列表保存到容器中，但只有一个 div 得到更新） . 我知道我快到了，但我已经看了几个小时了，但还是想不通。https://github.com/W33K5Y/TODO-PIRPLE

const saveButton = document.getElementById("submit-save");
const myLists = document.getElementById("my-lists");
const startNote = document.getElementById("start-note");
const listName = document.getElementById("new-list-name");
const myUl = document.getElementById("my-ul-lists");

// ! savebutton listener
saveButton.addEventListener("click", addNewTodo);
// ! make new html elements
const newTodoOl = document.createElement("ol");
const newTodoLi = document.createElement("li");
const listH1 = document.createElement("h4");

// ! =============== function for creating new todo ================================
function addNewTodo() {
  const todoDiv = document.querySelector(".todo-container");
  const todos = document.querySelectorAll(".todo-item");
  todos.forEach(function(todo) {
    createLi(todo);
  });
  listName.value ? listH1.innerText = listName.value : listH1.innerText = "My List";
  newTodoDivWrap.classList.add("new-todo-div");
  newTodoDivWrap.appendChild(listH1);
  newTodoDivWrap.appendChild(newTodoOl);
  myLists.appendChild(newTodoDivWrap);
  todoReset(todoDiv, startNote);
  startLoginSignUpNoneLobbyFlex();
}

// todo function to go in above that removes all of whats in the tido-container

function todoReset(div, lobbyDiv) {
  lobbyDiv.remove();
  div.firstElementChild.innerHTML = "";
}

function createLi(todo) {
  // ! Create LI
  const newTodo = document.createElement('li');
  newTodo.innerText = todo.innerText;
  newTodo.classList.add("todo-saved-item");
  newTodoOl.appendChild(newTodo);
}

【问题讨论】：

标签： javascript html function foreach traversal

【解决方案1】：

我认为以下是它无法按预期工作的原因：

const newTodoOl = document.createElement("ol");
const newTodoLi = document.createElement("li");
const listH1 = document.createElement("h4");

请记住，javascript 会创建引用，因此当您执行类似newTodoDivWrap.appendChild(listH1) 的操作时，您不会添加新元素，而只会添加对所述元素的引用。

就像你有两个对象一样。

var a = {'name': 'Anette'}
var bbbb = a // creates a reference, not a new object.
bbbb.name = 'Bjorn'

console.log(a.name) // Bjorn

所以在方法内部创建新元素，而不是创建和调用公共元素。

另外，这样的cmets太没必要了：

function createLi(todo) {
  // ! Create LI

您的方法名称可以完美地解释它的作用。您无需对此发表评论。开始养成命名变量或方法来解释发生了什么的习惯——你已经在这样做了（例如startLoginSignUpNoneLobbyFlex）——这样你就不必使用 cmets。注释是没有用的，除非是为了文档。

【讨论】：

好的，我有点理解您关于 js 创建引用的意思。对于这将如何影响我所做的事情，我仍然有点困惑。当我点击保存时，我得到了我拥有的列表中的所有项目（就像你的标准待办事项列表一样）但是当我第二次点击保存时，它只会扩展到原始列表而不是打印到该页面是一个全新的列表
感谢您抽出宝贵时间回复我，我也会参与有关 cmets 的工作 :)

【解决方案2】：

你必须移动

const newTodoOl = document.createElement("ol");
const newTodoLi = document.createElement("li");
const listH1 = document.createElement("h4");

进入 addNewTodo 函数。这样每次迭代都会产生一个全新的列表
Rickard 为我指明了正确的方向 :)

【讨论】：