AddEventListener 触发两次答案

【问题标题】：AddEventListener Firing TwiceAddEventListener 触发两次
【发布时间】：2022-12-30 09:59:29
【问题描述】：

我在打开表单 HTML 的按钮上有一个事件侦听器，当您单击表单按钮时，它会成功运行并添加一本书。但是如果你再次点击添加书籍按钮，打开表单，然后点击表单按钮，它会添加两本书，调用 addNewBook 函数两次。

我试着查看调试器，这就是我发现的，它显示它调用了两次，但我需要看看如何调用。

const bookBtn = document.querySelector(".book-btn");
const bookContainer = document.querySelector(".book-container");
const formContainer = document.querySelector(".form-container");

const addNewBook = (book, author, pages, read) => {
  const bookDiv = document.createElement("div");
  bookDiv.classList.add("book");

  console.log(book.value, author.value, pages.value, read.value);

  const h3 = document.createElement("h3");
  h3.textContent = book.value;
  const p1 = document.createElement("p");
  p1.textContent = author.value;
  const p2 = document.createElement("p");
  p2.textContent = pages.value;
  const p3 = document.createElement("p");
  p3.textContent = read.value;
  const childElements = [h3, p1, p2, p3];
  for (let i = 0; i < childElements.length; i++) {
    bookDiv.appendChild(childElements[i]);
  }
  bookContainer.appendChild(bookDiv);
  formContainer.style.display = "none";
};

bookBtn.addEventListener("click", () => {
  formContainer.style.display = "block";
  const addButton = document.querySelector(".form-btn");
  addButton.addEventListener("click", () => {
    debugger;
    const book = document.querySelector("#name");
    const author = document.querySelector("#author");
    const pages = document.querySelector("#pages");
    const read = document.querySelector("#read");
    addNewBook(book, author, pages, read);
  });
});

【问题讨论】：

标签： javascript html css

【解决方案1】：

您在此处向 addButton 添加事件侦听器：

bookBtn.addEventListener("click", () => {
  formContainer.style.display = "block";
  const addButton = document.querySelector(".form-btn");
  addButton.addEventListener("click", () => {

最后一行运行每次bookBtn 被点击。

理想情况下，不要有条件地添加该侦听器。只添加一次，让bookBtn 只显示表单而不做任何其他事情。

bookBtn.addEventListener("click", () => {
  formContainer.style.display = "block";
});
const addButton = document.querySelector(".form-btn");
addButton.addEventListener("click", () => {
  const book = document.querySelector("#name");
  const author = document.querySelector("#author");
  const pages = document.querySelector("#pages");
  const read = document.querySelector("#read");
  addNewBook(book, author, pages, read);
});

如果您要求按钮在 bookBtn 被单击一次之前不执行任何操作，请添加一个布尔标志以指示是否已单击。

let clicked = false;
bookBtn.addEventListener("click", () => {
  formContainer.style.display = "block";
  clicked = true;
});

const addButton = document.querySelector(".form-btn");
addButton.addEventListener("click", () => {
  if (!clicked) return;
  const book = document.querySelector("#name");
  const author = document.querySelector("#author");
  const pages = document.querySelector("#pages");
  const read = document.querySelector("#read");
  addNewBook(book, author, pages, read);
});

【讨论】：