appendChild onclick 只会添加 div 一次

Question

我正在制作时间表和待办事项列表网站。所以，我基本上为每个时间表块添加 divs。我在 yt (https://youtu.be/MkESyVB4oUw) 上使用本教程作为时间表块。（在 24:03）所以在 HTML 中有一个表单输入，他为此使用常量“表单”并使用 addEventListener 提交。我用过这个，我所有的时间表块都工作正常。我可以添加多个块，一切正常。

在那之后，我做了一个待办事项/目标部分，我决定将“表格”掌握在自己手中。所以我做了：

// I tried const and var and the same thing happened
const todoAdd = document.querySelector("#new-todo");   // This is the button
const weekDiv = document.querySelector("#week-divs");

const todoDiv = document.createElement('div');
todoDiv.classList.add("todo-div");

这就是我为时间块所做的并且它有效，然后我添加：

todoAdd.onclick = function(){
  weekDiv.appendChild(todoDiv);
}

当我这样做时，div 添加一次，仅此而已。如果我一直点击 div 就会一次又一次地被替换。

Answer 1

我想通了mid-writing。因为当表单的 addEventListener 启动时，就是我完成所有附加操作的时候。所以解决这个问题的简单方法就是在函数中添加 createElement。

  todoAdd.onclick = function(){
    const todoDiv = document.createElement('div');
    todoDiv.classList.add("todo-div");
    
    weekDiv.appendChild(todoDiv);
  }

如果我不是对它实际上只工作一次感到困惑的话，我可能会更快地意识到这一点。我认为缺少一些东西而不是一个简单的错误。我猜它只附加一次，因为它只被读取一次，而在 onclick 函数或 addEventListener 中它总是循环并且 re-reads 对吗？这就是我的想法。希望这可能对某人有所帮助。

appendChild onclick 只会添加 div 一次

appendChild onclick will only add div once

javascript

onclick

appendchild

addeventlistener

createelement