点击基于数据库生成的按钮在HTML页面展示对应数据的问题求解

你代码失效的核心原因有3个：

• 直接把对象data[i]拼接进HTML字符串时，对象会被默认转为[object Object]字符串，导致showinfo接收的参数不是原始的用户对象，参数传递直接失败
• 循环变量用var声明存在变量提升问题，循环结束后i的值会变成data.length，就算传参逻辑修复也容易出现索引溢出的问题
• 所有动态生成的按钮都使用了相同的id="btn"，违反了HTML id属性全局唯一的规范

这里推荐两种兼容性好的实现方式，你可以按需选择：

方案1：将对象转JSON字符串传递（改动最小） #

把要传递的用户对象转成JSON字符串后再拼接入HTML，同时转义引号避免语法冲突，修改appendData逻辑即可，修复后完整代码如下：

<div id="myData" ></div>
<aside>
    <p>Details: </p>
    <p id="configurationdetails"></p>
</aside>

<script>
fetch('http://localhost:3000/result')
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        appendData(data);
    })
    .catch(function (err) {
        console.log('error: ' + err);
    });
function appendData(data) {
    var mainContainer = document.getElementById("myData");
    // 把var改成let避免变量提升问题，也可以用forEach遍历更简洁
    for (let i = 0; i < data.length; i++) {
        var div = document.createElement("div");
        // 把用户对象转成JSON字符串，替换引号避免和onclick的引号冲突
        const userInfo = JSON.stringify(data[i]).replaceAll('"', '&quot;');
        // 去掉重复的id="btn"
        div.innerHTML = `<div class="container"> <div class="solid"> <button class="btn" onclick="showinfo(${userInfo})">name ${data[i].person_name} ${data[i].age}</button> </div></div>`;
        mainContainer.appendChild(div);
    }
}

function showinfo(info) {
    // 格式化展示用户信息，你也可以自己调整展示格式
    document.getElementById("configurationdetails").innerHTML = `姓名：${info.person_name} <br> 年龄：${info.age}`;
}
</script>

方案2：用addEventListener绑定事件（更易维护） #

不用拼接onclick字符串，直接生成DOM元素后绑定事件，完全规避字符串拼接带来的转义问题：

function appendData(data) {
    var mainContainer = document.getElementById("myData");
    data.forEach(user => {
        const div = document.createElement("div");
        const btn = document.createElement("button");
        btn.className = "btn";
        btn.textContent = `name ${user.person_name} ${user.age}`;
        // 直接绑定事件，闭包直接拿到当前遍历的user对象，不需要做参数转义
        btn.addEventListener('click', () => showinfo(user));
        const solidDiv = document.createElement("div");
        solidDiv.className = "solid";
        solidDiv.appendChild(btn);
        const containerDiv = document.createElement("div");
        containerDiv.className = "container";
        containerDiv.appendChild(solidDiv);
        div.appendChild(containerDiv);
        mainContainer.appendChild(div);
    })
}

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