为什么我所有的新笔记都不继承按钮功能？

Question

我有以下 JavaScript 代码，一旦加载 DOM 就会触发：

const add_note = () => {
 // Creates a new note and its props
 const new_note = document.createElement("div");
 const new_input = document.createElement("input");
 const new_form = document.createElement("form");
 const new_ol = document.createElement("ol");
 const new_button = document.createElement("button");

 //Populates the new note with inputs and checkboxes
 for (let i = 0; i < 5; i++) {
   let new_li = document.createElement("li");
   let new_checkbox = document.createElement("input");
   new_checkbox.setAttribute("type", "checkbox");
   let new_li_input = document.createElement("input");
   new_li_input.classList.add("li_input");
   new_ol.appendChild(new_li);
   new_li.appendChild(new_checkbox);
   new_li.appendChild(new_li_input);
 }

 //New note's settings
 new_note.setAttribute("id", "note");
 new_note.classList.add("note");
 new_note.appendChild(new_input);
 new_input.classList.add("note_input");
 new_input.setAttribute("placeholder", "Note's title");
 new_note.appendChild(new_form);
 new_form.appendChild(new_ol);
 new_ol.setAttribute("id", "ol_id");
 new_note.appendChild(new_button);
 new_button.classList.add("more_items");
 new_button.setAttribute("id", "more_items");

 //Inserts the new note and button
 const note_block = document.getElementById("notes");
 note_block.appendChild(new_note);
 const button = document.getElementById("more_items");
 button.addEventListener("click", add_more_items);
 button.innerHTML = "+";
};

但是，一旦创建了笔记，只有第一个笔记按钮继承了它的功能，如下图所示： Code loaded

我已经尽我所能尝试了所有方法，但还是想不通。无论如何，先谢谢了。

Answer 1

ID 在 html 中是唯一的，不能有多个具有相同 ID 的元素

要么删除这些行，将它们变成类，要么以某种方式区分它们：

new_note.setAttribute("id", "note");
...
new_ol.setAttribute("id", "ol_id");
...
new_button.setAttribute("id", "more_items");

并且只引用带有变量的按钮：

const note_block = document.getElementById("notes");
note_block.appendChild(new_note);
new_button.addEventListener("click", add_more_items);
new_button.innerHTML = "+";

实际上，您甚至可以在附加注释块之前将最后两行移动到代码的其余部分。

为什么我所有的新笔记都不继承按钮功能？

Why won't all of my new notes inherit the button function?

html

javascript

css