JS面向对象编程：如何每次用户输入时创建新变量存储书籍信息

我来帮你搞定这个问题！你当前的代码只是把输入的文本拼接后展示，但没有真正利用Book类创建实例，也没有妥善存储每次输入的书籍数据，而且事件监听的位置也写错了（不能放在类的构造函数里）。下面是具体的解决方案：

核心思路 #

你不需要创建无数个单独的变量（比如book1、book2...），这既不现实也不好维护。用一个数组来存储所有的Book实例是最优解——数组可以动态添加新元素，方便后续对所有书籍进行管理（比如查询、修改、删除）。

修改后的完整代码 #

HTML（无需改动，保持你原来的即可）

<input id="title" type="text" name="title" placeholder="title"><br>
<input id="isbn" type="text" name="isbn" placeholder="isbn"><br>
<input id="author" type="text" name="author" placeholder="author"><br>
<button id="add">Add field</button>
<div id="display"></div>

JavaScript

// 获取DOM元素
let title = document.getElementById('title');
let isbn = document.getElementById('isbn');
let author = document.getElementById('author');
let addBtn = document.getElementById('add');
let display = document.getElementById('display');

// 定义Book类
class Book {
  constructor(title, isbn, author) {
    this.title = title;
    this.isbn = isbn;
    this.author = author;
  }
}

// 创建数组存储所有Book实例
let books = [];

// 为按钮添加点击事件监听（放在类外面，这才是正确的位置）
addBtn.addEventListener('click', function() {
  // 获取并修剪输入值，避免空字符
  const bookTitle = title.value.trim();
  const bookIsbn = isbn.value.trim();
  const bookAuthor = author.value.trim();

  // 简单验证：确保所有输入都不为空
  if (!bookTitle || !bookIsbn || !bookAuthor) {
    alert('请填写完整的书籍信息哦！');
    return;
  }

  // 创建新的Book实例
  const newBook = new Book(bookTitle, bookIsbn, bookAuthor);
  // 将实例存入数组
  books.push(newBook);

  // 在页面上渲染这本书的信息
  const bookItem = document.createElement('div');
  bookItem.textContent = `📚 书名: ${newBook.title} | ISBN: ${newBook.isbn} | 作者: ${newBook.author}`;
  display.appendChild(bookItem);

  // 清空输入框，方便下一次输入
  title.value = '';
  isbn.value = '';
  author.value = '';

  // 可以在控制台查看当前存储的所有书籍实例
  console.log('当前已存储的书籍:', books);
});

关键说明 #

1. 用数组存储实例：books数组会保存每一次创建的Book对象，你可以随时通过这个数组访问所有书籍的数据，比如books[0]就是第一本添加的书。
2. 修正事件监听位置：事件监听不能放在类的构造函数内部，构造函数是用来初始化单个Book实例的，而按钮的点击逻辑属于全局交互，应该放在类外部。
3. 输入验证与清空：添加了简单的非空判断，避免创建空的书籍实例；每次添加后清空输入框，提升用户体验。
4. 利用Book类：现在每次点击都会创建一个真正的Book实例，完全符合你练习面向对象编程的需求。

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