如何将按钮的value设为对象而非字符串以正常使用childData？

DOM元素的所有属性（包括原生的value属性）本质上都是字符串类型，无法直接存储原生JS对象。你原有代码直接将childData拼接到value属性中的写法，最终只会得到值为[object Object]的无效字符串，无法获取到完整的原始对象数据。

两种可行的实现方案 #

• 内存映射存储方案：性能最优，无序列化/反序列化的额外开销
  不把对象内容直接挂载到DOM节点上，单独用一个JS数组/对象维护内存映射表，将所有需要绑定的childData存在JS内存中，仅给按钮存储对应的数字索引。点击按钮时通过索引从内存映射中取出原始对象，全程不做类型转换，完全保留对象的原始结构。
• JSON序列化存储方案：实现简单，无需维护全局映射
  将childData序列化为JSON字符串，存储在按钮的自定义data-*属性中，需要使用数据时再通过JSON.parse将字符串还原为对象，适合简单场景。

适配原有逻辑的修改代码 #

在你原有代码结构基础上调整后的可运行实现如下：

// 初始化内存映射表，用来存储所有原始chore对象
const choreDataStore = [];

childSnapshot.forEach(childItem => {
  var childData = childItem.val(); 
  // 将当前childData存入映射表，拿到对应的存储索引
  const dataIndex = choreDataStore.push(childData) - 1;

  // 拼接展示文本和按钮，仅将数字索引存在按钮的自定义属性中
  document.getElementById("displayChores").innerHTML += (
    String(childData["clocation"] + " " +
      childData["cname"] + " " +
      childData["cdescription"] + " " +
      childData["ccredits"] + " " +
      childData["cexp"]
    ) + "<br />" +
    // 不再将childData直接拼接到value属性中
    `<button class='chorebtn' data-index="${dataIndex}" onclick="choreDone(this)">Mission Complete</button><br>`
  );
});

// 重写choreDone方法，接收被点击的按钮元素作为入参
function choreDone(btnEl) {
  // 通过按钮上存储的索引，直接从映射表中读取原始对象，无类型转换
  const targetChore = choreDataStore[Number(btnEl.dataset.index)];
  // 此处的targetChore和childSnapshot.val()返回的对象结构完全一致，可直接正常使用
}

如果更倾向使用JSON序列化的实现方式，对应的逻辑可调整为：

childSnapshot.forEach(childItem => {
  var childData = childItem.val();
  // 将对象序列化为JSON字符串，转义单引号避免字符串拼接出错
  const choreJson = JSON.stringify(childData).replace(/'/g, "'");

  document.getElementById("displayChores").innerHTML += (
    `${childData["clocation"]} ${childData["cname"]} ${childData["cdescription"]} ${childData["ccredits"]} ${childData["cexp"]}<br />` +
    `<button class='chorebtn' data-chore='${choreJson}' onclick="choreDone(this)">Mission Complete</button><br>`
  );
});

function choreDone(btnEl) {
  // 将存储的JSON字符串还原为原生对象
  const targetChore = JSON.parse(btnEl.dataset.chore);
}

常见踩坑提醒 #

• 不要直接将JS对象拼接到DOM属性值中，浏览器会自动调用对象的toString()方法，最终只会得到无效的[object Object]字符串。
• 存储业务数据时优先使用自定义data-*属性，尽量不要占用原生表单元素的value属性，避免语义混淆。

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