如何不使用函数通过innerHTML显示对象？循环按钮绑定问题求助

我完全懂你遇到的坑——用var i的for循环创建按钮时，所有按钮的点击事件都会绑定同一个i变量，等你真的点击按钮时，循环早就跑完了，i已经变成了循环的最终值，所以只有最后一个按钮能正常触发显示逻辑。而且你不想用单独定义的函数，还要靠document.write来实现评论展示，那咱们可以这么处理：

核心思路是在循环生成按钮的瞬间，把对应帖子的评论数据直接“固化”到按钮的点击逻辑里，彻底摆脱对循环变量i的依赖。这样每个按钮的点击代码里都带着专属自己的评论数据，不会被后续循环覆盖。

举个具体的实现例子，假设你有一个存储帖子数据的数组：

// 模拟你的帖子与评论数据
var posts = [
  { id: 1, comments: [{author: "张三", content: "这帖干货拉满"}, {author: "李四", content: "同意楼上！"}] },
  { id: 2, comments: [{author: "王五", content: "学到了学到了"}, {author: "赵六", content: "感谢分享"}] },
  { id: 3, comments: [{author: "孙七", content: "求后续更新"}, {author: "周八", content: "已收藏"}] }
];

// 用var i的循环生成按钮
for (var i = 0; i < posts.length; i++) {
  // 把当前帖子的评论转成JSON字符串，方便直接嵌入到点击逻辑里
  var commentsJSON = JSON.stringify(posts[i].comments);
  
  // 用document.write生成按钮，点击逻辑直接写在onclick属性中
  document.write(`
    <button onclick="
      // 把JSON字符串解析回评论对象
      var comments = JSON.parse('${commentsJSON}');
      // 用document.write输出评论内容
      document.write('<h3>帖子${i+1}的评论</h3>');
      for (var j = 0; j < comments.length; j++) {
        document.write('<p><strong>' + comments[j].author + ':</strong> ' + comments[j].content + '</p>');
      }
    ">显示帖子${i+1}的评论</button><br><br>
  `);
}

为什么这个方法能解决问题？ #

• 循环执行时，每次都会把当前posts[i].comments序列化成独立的JSON字符串，嵌入到对应按钮的onclick代码里。这意味着每个按钮的点击逻辑里的评论数据都是固定、专属的，不再依赖会被循环覆盖的变量i。
• 全程不需要定义额外的外部函数，所有逻辑都直接内联在按钮的点击事件中，完全符合你的需求。

小提醒 #

• 要注意document.write的特性：如果页面已经加载完成后调用它，会直接覆盖整个页面的内容。如果不想清空原有页面，其实可以改用innerHTML往页面的指定容器里插入评论，但你明确要求用document.write，所以咱们就按这个方案来。
• 如果你的评论内容里包含单引号，JSON.stringify会自动帮你转义成\'，不用担心嵌入到字符串里会出现语法错误。

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