如何用JS添加重复HTML元素？笔记应用新增笔记报错求助

问题描述 #

我用HTML、CSS和JS构建笔记应用，添加第一条笔记正常，但添加第二条时出现错误：

Cannot set properties of undefined (setting 'innerText')
    at HTMLButtonElement.addNote (notetaker.js:37:26)

原JS代码 #

let myNote = "";
let myTitle = "";
let noteInput = document.getElementById("note-input");
let titleInput = document.getElementById("title-input");
let title = document.getElementById("title");
let note = document.getElementById("first-note-p");
let addButton = document.getElementById("addButton");
let removeButton = document.getElementById("remove-button");
let newDiv = document.createElement("div");
let newP = document.createElement("p");
let newH3 = document.createElement("h3");
let newButton = document.createElement("button");
let notePlace = document.getElementById("note-place");
let button = document.getElementsByTagName("button");
let div = document.getElementsByTagName("div");
let paragrapgh = document.getElementsByTagName("p");
let head3 = document.getElementsByTagName("h3");
let tally = 0;

const addNote = () => {
  myNote = noteInput.value;
  myTitle = titleInput.value;
  notePlace.appendChild(newDiv);
  div[tally].appendChild(newH3);
  div[tally].appendChild(newP);
  div[tally].appendChild(newButton);
  notePlace = document.getElementById("note-place");
  head3[tally].innerText = myTitle;
  paragrapgh[tally].innerText = myNote;
  button[tally + 1].innerText = "remove";
  tally += 1;
};

const removeNote = () => {
  title.innerHTML = "";
  note.innerHTML = "";
};

addButton.onclick = addNote;

原HTML代码 #

<h1>Take your notes</h1>
<input id="title-input" onfocus="this.value=''" type="text" value="title" />
<input id="note-input" onfocus="this.value=''" type="text" value="note" />
<button id="addButton">add</button>
<div id="note-place"></div>

错误原因 #

核心问题是你只创建了一组DOM元素（newDiv、newP、newH3、newButton），第一次添加笔记时把这些元素挂载到页面上了，第二次点击时试图重复添加这些已经存在的元素——DOM元素不能同时存在于页面的多个位置，重复appendChild只会把它们从原来的位置移到新位置，而不是创建新元素。这就导致第二次执行时，head3[tally]、paragrapgh[tally]这些集合里的元素数量没跟上tally的增长，自然出现undefined的错误。

另外还有几个小问题：

• paragrapgh拼写错误，正确拼写是paragraph
• removeNote函数里操作的title和note元素在HTML中不存在，逻辑无效
• 依赖getElementsByTagName的索引操作容易出错，实时集合的长度会随DOM变化而改变

修复后的代码 #

JS代码 #

const noteInput = document.getElementById("note-input");
const titleInput = document.getElementById("title-input");
const addButton = document.getElementById("addButton");
const notePlace = document.getElementById("note-place");

const addNote = () => {
  // 每次点击都创建全新的DOM元素
  const newDiv = document.createElement("div");
  const newH3 = document.createElement("h3");
  const newP = document.createElement("p");
  const newButton = document.createElement("button");

  // 获取输入值并去除首尾空格
  const myTitle = titleInput.value.trim();
  const myNote = noteInput.value.trim();

  // 空内容不添加笔记
  if (!myTitle || !myNote) return;

  // 给新元素赋值内容
  newH3.innerText = myTitle;
  newP.innerText = myNote;
  newButton.innerText = "remove";

  // 给删除按钮绑定点击事件，移除当前笔记
  newButton.addEventListener("click", () => {
    notePlace.removeChild(newDiv);
  });

  // 组装元素并添加到页面
  newDiv.appendChild(newH3);
  newDiv.appendChild(newP);
  newDiv.appendChild(newButton);
  notePlace.appendChild(newDiv);

  // 重置输入框为默认提示文本
  titleInput.value = "title";
  noteInput.value = "note";
};

addButton.addEventListener("click", addNote);

HTML代码 #

<h1>Take your notes</h1>
<input id="title-input" onfocus="this.value=''" type="text" value="title" />
<input id="note-input" onfocus="this.value=''" type="text" value="note" />
<button id="addButton">add</button>
<div id="note-place"></div>

修复要点 #

• 每次调用addNote时重新创建一组新的DOM元素，避免重复使用同一元素
• 直接给新创建的删除按钮绑定点击事件，点击时移除对应的笔记容器
• 添加空值判断，避免创建空白笔记
• 用addEventListener绑定事件，比直接赋值onclick更灵活，支持绑定多个事件
• 移除了无用的变量和无效的removeNote函数（如需批量删除功能可另行补充）

内容的提问来源于stack exchange，提问作者Zangooii