HTML/CSS/JS开发图书馆网站 表单提交无法生成新增书籍卡片求助

核心错误点如下：

• 你写的newBookCard()函数逻辑完全错误，HTML中不存在ID为main的元素，根本找不到要插入内容的容器
• 初始的书籍渲染逻辑只在页面加载时执行了一次，新增书籍后没有重新触发渲染流程，所以新数据不会同步展示到页面上
• 新增卡片的逻辑没有和预置测试卡片的渲染格式对齐，就算插入成功样式也会不一致

修复步骤 #

1. 抽离公共渲染函数 #

把原来页面加载时的渲染逻辑抽成可复用的函数，不管是初始加载还是新增书籍都调用这个函数渲染全量数据：

// 抽离渲染函数，每次数据更新后调用即可刷新页面
function renderBooks() {
  let htmlCode = ``;
  myLibrary.forEach(function(singleBookObjects){
    htmlCode = 
      htmlCode + 
      `
      <entry>
          <div>
          <h3>Title: ${singleBookObjects.title}</h3>
          <h3>Author: ${singleBookObjects.author}</h3>
          <h3>Pages: ${singleBookObjects.pages}</h3>
          <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
          </label>  
          </div>
      </entry>
      `;
  });
  const bookCards = document.querySelector(".all-book-cards");
  bookCards.innerHTML = htmlCode;
}
// 页面初始加载调用一次渲染测试数据
renderBooks();

2. 修改提交按钮的点击逻辑 #

删除没用的newBookCard()函数，把原来调用newBookCard()的地方换成调用renderBooks()即可，修改后的点击事件代码：

const addBtn = document.getElementById("submit");
addBtn.onclick = function() {
    let a = document.getElementById("bookTitle").value
    let b = document.getElementById("bookAuthor").value
    let c = document.getElementById("bookPages").value
    let newBook = new Book(a, b, c);
    
    addBookToLibrary(newBook);
    console.log(myLibrary);

    // 替换原来的newBookCard()调用，调用公共渲染函数刷新页面
    renderBooks();

    document.getElementById("bookTitle").value = ""
    document.getElementById("bookAuthor").value = ""
    document.getElementById("bookPages").value = ""
    // 可选：提交成功后自动关闭表单
    closeForm();
}

3. 删除冗余代码 #

把原来页面加载时写的这段冗余代码删掉即可，这部分逻辑已经整合到renderBooks函数里了：

let htmlCode = ``;
myLibrary.forEach(function(singleBookObjects){
    htmlCode = 
      htmlCode + 
      `
      <entry>
          <div>
          <h3>Title: ${singleBookObjects.title}</h3>
          <h3>Author: ${singleBookObjects.author}</h3>
          <h3>Pages: ${singleBookObjects.pages}</h3>
          <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
          </label>  
          </div>
      </entry>
      `;
  });
const bookCards = document.querySelector(".all-book-cards");
bookCards.innerHTML = htmlCode;
// 没用的newBookCard函数也直接删掉

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