JavaScript笔记应用按钮click事件监听器失效求助

你的笔记应用点击无反应，核心原因是代码存在未声明变量、缺失关键函数、重复事件绑定这些语法/逻辑错误，导致JS执行中断，无法完成DOM渲染和事件响应。以下是具体修复点：

1. 初始化未声明的核心变量 #

代码中直接使用了notes、isUpdate、UpdateId但未定义，会抛出ReferenceError，中断后续代码执行。

修复：在代码最顶部添加变量初始化：

// 从localStorage读取笔记，没有则初始化空数组
let notes = JSON.parse(localStorage.getItem("notes")) || [];
let isUpdate = false; // 标记是否处于编辑状态
let UpdateId = 0; // 编辑的笔记索引

2. 补充缺失的关键函数 #

showMenu、updateNote、deleteNote只在HTML字符串里调用，但未实现，执行时会报错。

修复：添加这些函数的基础实现：

// 显示笔记的操作菜单
function showMenu(elem) {
  elem.parentElement.classList.add("show");
  // 点击菜单外部时关闭菜单
  document.addEventListener("click", (e) => {
    if (e.target !== elem && !elem.parentElement.contains(e.target)) {
      elem.parentElement.classList.remove("show");
    }
  }, { once: true });
}

// 进入笔记编辑状态
function updateNote(index, title, desc) {
  isUpdate = true;
  UpdateId = index;
  titleTag.value = title;
  descTag.value = desc;
  popupTitle.textContent = "Update a Note";
  addBtn.textContent = "Update Note";
  // 自动打开弹窗
  addBox.click();
}

// 删除指定索引的笔记
function deleteNote(index) {
  notes.splice(index, 1);
  localStorage.setItem("notes", JSON.stringify(notes));
  showNotes();
}

3. 合并重复的事件绑定 #

代码中两次给closeIcon绑定点击事件，可合并为一个，同时重置编辑状态：

closeIcon.addEventListener("click", () => {
  popUpBox.classList.remove("show");
  titleTag.value = "";
  descTag.value = "";
  // 重置弹窗标题和按钮文本
  popupTitle.textContent = "Add a New Note";
  addBtn.textContent = "Add Note";
  isUpdate = false;
});

4. 修正月份数组的空格问题 #

月份数组中" September"包含多余空格，会导致日期显示异常，改为：

const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

修复后的完整代码 #

// 初始化核心变量
let notes = JSON.parse(localStorage.getItem("notes")) || [];
let isUpdate = false;
let UpdateId = 0;

const addBox = document.querySelector(".add-box");
const popUpBox = document.querySelector(".popup-box");
const closeIcon = document.querySelector("header i");
const titleTag = document.querySelector("input");
const descTag = document.querySelector("textarea");
const addBtn = popUpBox.querySelector("button");
const popupTitle = document.querySelector("header p");

const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

addBox.addEventListener("click", function(){
  titleTag.focus();
  popUpBox.classList.add("show");
});

closeIcon.addEventListener("click", () => {
  popUpBox.classList.remove("show");
  titleTag.value = "";
  descTag.value = "";
  popupTitle.textContent = "Add a New Note";
  addBtn.textContent = "Add Note";
  isUpdate = false;
});

addBtn.addEventListener("click", (e) => {
  e.preventDefault();
  let noteTitle = titleTag.value,
      noteDesc = descTag.value;

  if (noteTitle || noteDesc) {
    let dateObj = new Date(),
        month = months[dateObj.getMonth()],
        day = dateObj.getDate(),
        year = dateObj.getFullYear();
    let noteInfo = {
      title: noteTitle, description: noteDesc,
      date: `${month} ${day}, ${year}`
    };

    if(!isUpdate){
      notes.push(noteInfo);
    } else {
      isUpdate = false;
      notes[UpdateId] = noteInfo;
    }

    localStorage.setItem("notes", JSON.stringify(notes));
    closeIcon.click();
    showNotes();
  }
});

function showNotes() {
  document.querySelectorAll(".note").forEach(note => note.remove());
  notes.forEach((note, index) => {
    let liTag = `<li class="note">
          <div class="details">
              <p>${note.title}</p>
              <span>${note.description}</span>
          </div>
          <div class="bottom-content">
              <span>${note.date}</span>
              <div class="settings">
                <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
                <ul class="menu">
                    <li onclick="updateNote(${index}, '${note.title.replace(/'/g, "\\'")}', '${note.description.replace(/'/g, "\\'")}')"><i class="uil uil-pen"></i>Edit</li>
                    <li onclick="deleteNote(${index})"><i class="uil uil-trash"></i>Delete</li>
                </ul>
            </div>
          </div>
         </li>`;
    addBox.insertAdjacentHTML("afterend", liTag);
  });
}

// 补充缺失的函数
function showMenu(elem) {
  elem.parentElement.classList.add("show");
  document.addEventListener("click", (e) => {
    if (e.target !== elem && !elem.parentElement.contains(e.target)) {
      elem.parentElement.classList.remove("show");
    }
  }, { once: true });
}

function updateNote(index, title, desc) {
  isUpdate = true;
  UpdateId = index;
  titleTag.value = title;
  descTag.value = desc;
  popupTitle.textContent = "Update a Note";
  addBtn.textContent = "Update Note";
  addBox.click();
}

function deleteNote(index) {
  notes.splice(index, 1);
  localStorage.setItem("notes", JSON.stringify(notes));
  showNotes();
}

showNotes();

额外说明：在updateNote的HTML字符串中，对标题和描述的单引号做了转义处理（replace(/'/g, "\\'")），避免笔记内容包含单引号时导致HTML语法错误。

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