买不同价格不同名称的书

如果你想让用户购买不同价格和名称的书籍，并能实时更新数量和总价，可以稍微调整之前的代码，使其包含一个书籍对象数组，每个对象包含书籍的名称、价格和库存信息。以下是修改后的JavaScript部分：

let books = [
  { name: '书A', price: 10, quantity: 1 },
  { name: '书B', price: 15, quantity: 2 },
  { name: '书C', price: 20, quantity: 1 } // 更多书籍...
];

function buyBook(book) {
  if (book.quantity > 0) {
    book.quantity--;
    totalCost += book.price;
    updateDisplay(book);
  } else {
    alert('这本书已售罄');
  }
}

function updateDisplay(book) {
  // 更新书籍数量和总价
  books.forEach(b => {
    document.getElementById(`book-${b.name}`).innerText = `${b.name}: ${b.quantity}本`;
  });
  document.getElementById('total-cost').innerText = `累计总和: ${totalCost}元`;
}

// 在HTML中添加书籍元素并绑定事件
books.forEach(book => {
  const buttonId = `buy-book-${book.name}`;
  const button = document.createElement('button');
  button.innerText = '购买';
  button.id = buttonId;
  button.addEventListener('click', () => buyBook(book));

  const displayElement = document.createElement('p');
  displayElement.innerText = `${book.name}: ${book.quantity}本`;
  displayElement.id = `book-${book.name}`;

  document.body.appendChild(displayElement);
  document.body.appendChild(button);
});

现在，每个书籍都有其独特的价格，当用户点击对应的购买按钮时，会从库存中减一并更新显示。请注意，在实际项目中，最好将这些数据存储在服务器端以便持久化和同步。