在sessionStorage中存储用户ID报错？循环内按钮点击传递clients[i]._id至其他页面的问题排查

我来帮你排查下问题，你的代码里主要有两个核心问题导致了当前的错误：

1. clients变量作用域问题 #

你在ajax的success回调里定义的clients是局部变量，buildTable函数里的clients也是它的参数（局部变量），而store函数属于全局作用域，根本访问不到这两个局部的clients变量，所以会直接抛出"clients is not defined"的错误——这也是为什么store函数里的console.log没输出的原因：代码在报错处就停止执行了。

2. 未传递当前行的客户ID #

就算你把clients改成全局变量，store函数里的clients._id也毫无意义，因为clients是一个数组，你没有指定要取哪个索引对应的客户ID，循环生成的所有按钮都会调用同一个store函数，根本不知道对应哪条数据。

下面给你两种修复方案，推荐第二种更规范的写法：

方案一：直接给store函数传递客户ID #

修改buildTable函数里的按钮代码，把当前行的clients[i]._id作为参数传入store函数：

function buildTable(clients) { 
    let table = document.getElementById('tabelaClientesAdmin') 
    // 先清空表格，避免重复添加（可选，根据你的需求）
    table.innerHTML = '';
    for (let i = 0; i < clients.length; i++) { 
        let row = `<tr> 
            <td>${clients[i]._id}</td> 
            <td>${clients[i].name}</td> 
            <td>${clients[i].admin}</td> 
            <td><button type="button" class="btn btn-primary" onclick="store('${clients[i]._id}')">Ver Cliente</button></td> 
        </tr>` 
        table.innerHTML += row 
    } 
} 

然后修改store函数，直接接收传入的ID：

function store(clientId) { 
    console.log("Trying to get clientId....", clientId) 
    sessionStorage.setItem("clientId", clientId); 
    location.href = "./ver_cliente"; 
}

这样就完全不需要依赖全局的clients变量，直接把需要的ID传递过去，简单直接。

方案二：使用事件委托（更推荐） #

内联onclick事件不利于代码维护，也容易出现作用域问题，推荐用事件委托的方式处理：

1. 修改buildTable里的按钮，添加data-client-id属性存储客户ID：

function buildTable(clients) { 
    let table = document.getElementById('tabelaClientesAdmin') 
    table.innerHTML = '';
    for (let i = 0; i < clients.length; i++) { 
        let row = `<tr> 
            <td>${clients[i]._id}</td> 
            <td>${clients[i].name}</td> 
            <td>${clients[i].admin}</td> 
            <td><button type="button" class="btn btn-primary" data-client-id="${clients[i]._id}">Ver Cliente</button></td> 
        </tr>` 
        table.innerHTML += row 
    } 
} 

2. 在页面加载完成后（或者ajax请求成功后），给表格绑定点击事件委托：

// 可以放在ajax的success回调里，或者页面的DOMContentLoaded事件中
document.getElementById('tabelaClientesAdmin').addEventListener('click', function(e) {
    // 判断点击的是目标按钮
    if (e.target.classList.contains('btn-primary')) {
        const clientId = e.target.dataset.clientId;
        console.log("Trying to get clientId....", clientId);
        sessionStorage.setItem("clientId", clientId);
        location.href = "./ver_cliente";
    }
});

这种方式不需要全局的store函数，所有事件逻辑集中管理，也避免了内联事件的各种问题，是更规范的前端写法。

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