如何点击按钮更新div.innerHTML中图书read属性的取值？

核心问题分析 #

直接调用replace操作innerHTML却未重新赋值、数据与视图未同步，或是动态生成元素的事件绑定失效，都会导致切换功能无响应。

解决步骤 #

1. 改用「数据驱动视图」方案（推荐）

把图书数据存在数组中，切换状态时先更新数据，再同步到DOM，避免直接操作innerHTML的脆弱性：

// 示例图书数据数组
let library = [
  { id: 1, title: "百年孤独", author: "马尔克斯", read: "yes" },
  { id: 2, title: "人类简史", author: "尤瓦尔", read: "not-yet" }
];

// 切换阅读状态的核心函数
function toggleRead(bookId) {
  // 定位目标图书
  const targetBook = library.find(book => book.id === bookId);
  if (!targetBook) return;
  
  // 切换read属性值
  targetBook.read = targetBook.read === "yes" ? "not-yet" : "yes";
  
  // 更新对应DOM元素的状态文本
  const statusElement = document.querySelector(`.book-item[data-id="${bookId}"] .read-status`);
  if (statusElement) {
    statusElement.textContent = targetBook.read;
  }
}

2. 修复动态元素的事件绑定

如果图书卡片是动态添加的，直接给按钮绑定事件会失效，用事件委托处理：

// 给父容器绑定点击事件，监听子按钮的触发
document.querySelector('#library-container').addEventListener('click', (e) => {
  if (e.target.classList.contains('editToggle')) {
    // 从父元素获取图书ID（需给图书卡片添加data-id属性）
    const bookId = parseInt(e.target.closest('.book-item').dataset.id);
    toggleRead(bookId);
  }
});

3. 若坚持使用innerHTML（不推荐），需正确赋值

如果一定要通过替换innerHTML实现，必须将replace后的结果重新赋值给元素，同时做状态判断：

// 按钮点击处理逻辑
function handleToggleClick() {
  const bookElement = this.closest('.book-item');
  const currentHtml = bookElement.innerHTML;
  
  if (currentHtml.includes('read: yes')) {
    bookElement.innerHTML = currentHtml.replace('read: yes', 'read: not-yet');
  } else if (currentHtml.includes('read: not-yet')) {
    bookElement.innerHTML = currentHtml.replace('read: not-yet', 'read: yes');
  }
}

注意：这种方式容易误替换无关文本（比如图书标题含"yes"），且无法同步底层数据，后续功能扩展会出现问题，不建议采用。

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