点击提交按钮后myLibrary数组新值仅显示在首张卡片的问题求助

问题现象 #

用户输入书籍信息提交后，数据会存入myLibrary数组并展示为卡片。首次提交一切正常，但再次提交时，新输入的内容只会覆盖首张卡片的信息，不会生成新的卡片来展示新增书籍。

问题根源 #

1. 重复ID导致DOM选择错误：每次创建新卡片时都给元素设置id="cardDetails"，但DOM中ID必须唯一。后续通过document.getElementById('cardDetails')添加内容时，只会找到第一个卡片，所有新内容都加到了首张卡片里。
2. 循环覆盖内容：addcard函数里的for循环遍历整个数组，最终卡片内容会被数组最后一项覆盖，而且不管创建多少卡片，内容都是同一本书的信息。
3. 全局变量风险：books、bookinfo等变量未用let/const声明，会成为全局变量，可能引发意外的变量冲突。

修复后的代码 #

JavaScript代码 #

let myLibrary = [];

function Book(book, author, pages) {
  this.book = book;
  this.author = author;
  this.pages = pages;
}

function addBookToLibrary() {
  const book = document.getElementById('book').value;
  const author = document.getElementById('author').value;
  const pages = document.getElementById('pages').value;
  const newBook = new Book(book, author, pages);
  myLibrary.push(newBook);
  return newBook;
}

const submitBtn = document.getElementById('submit');
const rightSide = document.getElementById('rightSide');

submitBtn.addEventListener('click', e => {
  const bookInput = document.getElementById('book');
  const authorInput = document.getElementById('author');
  const pagesInput = document.getElementById('pages');

  if (bookInput.value === '' || authorInput.value === '' || pagesInput.value === '') {
    alert('请补充完整信息');
    return;
  }

  const newBook = addBookToLibrary();
  addCard(newBook);
  
  bookInput.value = '';
  authorInput.value = '';
  pagesInput.value = '';
})

function addCard(book) {
  const newCard = document.createElement('div');
  newCard.setAttribute('class', 'div');
  rightSide.appendChild(newCard);

  const bookTitle = document.createElement('h1');
  bookTitle.setAttribute('class', 'h1Style');
  bookTitle.innerHTML = `Book: ${book.book}`;

  const authorTitle = document.createElement('h1');
  authorTitle.setAttribute('class', 'h1Style');
  authorTitle.innerHTML = `Author: ${book.author}`;

  const pagesTitle = document.createElement('h1');
  pagesTitle.setAttribute('class', 'h1Style');
  pagesTitle.innerHTML = `${book.pages} pages`;

  newCard.appendChild(bookTitle);
  newCard.appendChild(authorTitle);
  newCard.appendChild(pagesTitle);
}

HTML代码（无修改） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Library</title>
  <link rel="stylesheet" href="./Resource/style.css">
</head>

<body>

  <section class="grid">
    <div class="leftSide">
      <form class="form">
        <h1> Book Library</h1>

        <label for="book">Book</label>
        <input type="text" id="book" name="book">

        <label for="author">Author</label>
        <input type="text" id="author" name="author">

        <label for="pages">Pages</label>
        <input type="text" id="pages" name="pages">

        <button type='button' class="submit" id="submit">submit</button>

      </form>

    </div>

    <div id="rightSide" class="rightSide">

    </div>


  </section>


  <script src="./Resource/app.js"></script>
</body>

</html>

修复说明 #

1. 移除了重复的ID设置，直接通过创建的DOM元素操作内容，避免了选择错误。
2. 修改addBookToLibrary函数返回刚添加的书籍，addCard函数接收单个书籍对象，每次仅为新增书籍创建卡片，内容不再被循环覆盖。
3. 给所有变量添加const/let声明，避免全局变量污染。
4. 优化了输入框的获取方式，代码更简洁易读。

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