JS图书管理系统新增DOM元素自动清除问题求助

问题根源 #

你的代码中，表单提交按钮触发点击事件后，浏览器会执行默认的表单提交行为——刷新页面，导致所有动态添加的DOM元素被重置回页面初始状态，所以看似元素添加成功后又消失了。

修复步骤 #

1. 阻止表单默认提交行为 #

修改intakeFormData函数，接收事件参数并阻止默认行为：

function intakeFormData(e) {
  // 阻止浏览器默认的表单提交刷新行为
  e.preventDefault();
  
  let title = document.getElementById("Title").value;
  let author = document.getElementById("Author").value;
  let pages = document.getElementById("Pages").value;
  let read = document.getElementById("Read").value;
  let imageURL = document.getElementById("imageURL").value;

  addBookToLibrary(title, author, pages, read, imageURL);
  
  // 可选：提交后清空表单并隐藏
  document.getElementById("newBookForm").reset();
  document.getElementById("formContainer").style.display = "none";
}

更规范的做法是监听表单的submit事件而非按钮的click事件，避免用户按回车触发提交时失效：

// 替换原有的submitBtn监听代码
const newBookForm = document.getElementById("newBookForm");
newBookForm.addEventListener("submit", intakeFormData);

2. 修复重复渲染问题 #

当前displayBooksOnPage函数每次调用都会遍历整个数组创建新卡片，导致重复添加。推荐两种修复方案：

方案一：清空后重新渲染所有书籍（简单直接）

function displayBooksOnPage() {
  const books = document.querySelector(".cards");
  
  // 清空原有卡片，保留表单容器
  const formContainer = document.getElementById("formContainer");
  books.innerHTML = "";
  books.appendChild(formContainer);

  let counter = 0;

  // 注意：参数名不要和全局myLibrary重名，改为book
  myLibrary.forEach((book) => {
    const card = document.createElement("div");
    card.classList.add("card");
    books.append(card);

    // 原有的卡片内容创建逻辑，将myLibrary[key]改为book[key]
    for (let key in book) {
      if (counter <= 0) {
        const titleHeader = document.createElement("h5");
        titleHeader.textContent = `${book[key]}`;
        titleHeader.classList.add("card-title");
        card.appendChild(titleHeader);
        counter = 1;
      } else if (counter < 2) {
        const cardAuthor = document.createElement("p");
        cardAuthor.textContent = `${book[key]}`;
        cardAuthor.classList.add("card-author");
        card.appendChild(cardAuthor);
        counter = 2;
      } else if (counter < 3) {
        const cardPages = document.createElement("p");
        cardPages.textContent = `${book[key]}`;
        cardPages.classList.add("card-pages");
        card.appendChild(cardPages);
        counter = 3;
      } else if (counter < 4) {
        const readContainer = document.createElement("div");
        readContainer.classList.add("read");
        card.appendChild(readContainer);
        const readElement = document.createElement("p");
        readElement.textContent = `${book[key]}`;
        readElement.classList.add("card-read");
        readContainer.append(readElement);
        counter = 4;
      } else if (counter < 5) {
        const imageContainer = document.createElement("div");
        imageContainer.classList.add("book-image-container");
        card.appendChild(imageContainer);
        const bookImage = document.createElement("img");
        bookImage.src = `${book[key]}`;
        bookImage.classList.add("book-image");
        imageContainer.append(bookImage);
        const editContainer = document.createElement("div");
        editContainer.classList.add("edit-container");
        card.appendChild(editContainer);
        const editBtn = document.createElement("button");
        editBtn.innerText = "Edit";
        editBtn.classList.add("edit");
        editContainer.append(editBtn);
        const deleteContainer = document.createElement("div");
        deleteContainer.classList.add("delete-container");
        card.appendChild(deleteContainer);
        const deleteBtn = document.createElement("button");
        deleteBtn.innerText = "Delete";
        deleteBtn.classList.add("delete");
        deleteContainer.append(deleteBtn);
      }
    }

    counter = 0; // 直接重置计数器，无需单独函数
  });
}

方案二：只渲染新增的单本书（性能更优）

修改addBookToLibrary函数，新增单本书渲染逻辑，避免重复遍历数组：

function addBookToLibrary(title, author, pages, read, imageURL) {
  let book = new Book(title, author, pages, read, imageURL);
  myLibrary.push(book);
  renderSingleBook(book); // 调用单本书渲染函数
}

// 新增单本书渲染函数
function renderSingleBook(book) {
  const books = document.querySelector(".cards");
  const card = document.createElement("div");
  card.classList.add("card");
  // 将新卡片插入到表单容器前
  books.insertBefore(card, document.getElementById("formContainer"));

  let counter = 0;
  for (let key in book) {
    if (counter <= 0) {
      const titleHeader = document.createElement("h5");
      titleHeader.textContent = `${book[key]}`;
      titleHeader.classList.add("card-title");
      card.appendChild(titleHeader);
      counter = 1;
    } else if (counter < 2) {
      const cardAuthor = document.createElement("p");
      cardAuthor.textContent = `${book[key]}`;
      cardAuthor.classList.add("card-author");
      card.appendChild(cardAuthor);
      counter = 2;
    } else if (counter < 3) {
      const cardPages = document.createElement("p");
      cardPages.textContent = `${book[key]}`;
      cardPages.classList.add("card-pages");
      card.appendChild(cardPages);
      counter = 3;
    } else if (counter < 4) {
      const readContainer = document.createElement("div");
      readContainer.classList.add("read");
      card.appendChild(readContainer);
      const readElement = document.createElement("p");
      readElement.textContent = `${book[key]}`;
      readElement.classList.add("card-read");
      readContainer.append(readElement);
      counter = 4;
    } else if (counter < 5) {
      const imageContainer = document.createElement("div");
      imageContainer.classList.add("book-image-container");
      card.appendChild(imageContainer);
      const bookImage = document.createElement("img");
      bookImage.src = `${book[key]}`;
      bookImage.classList.add("book-image");
      imageContainer.append(bookImage);
      const editContainer = document.createElement("div");
      editContainer.classList.add("edit-container");
      card.appendChild(editContainer);
      const editBtn = document.createElement("button");
      editBtn.innerText = "Edit";
      editBtn.classList.add("edit");
      editContainer.append(editBtn);
      const deleteContainer = document.createElement("div");
      deleteContainer.classList.add("delete-container");
      card.appendChild(deleteContainer);
      const deleteBtn = document.createElement("button");
      deleteBtn.innerText = "Delete";
      deleteBtn.classList.add("delete");
      deleteContainer.append(deleteBtn);
    }
  }
}

额外优化建议 #

• 初始示例书籍《The Hobbit》可通过调用addBookToLibrary添加到数组，避免DOM与数据不一致
• 可给表单添加输入验证逻辑，确保必填项不为空

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