如何在javascript中为按钮指定唯一id

我需要一些帮助，因为我有点卡住了，我不确定我做错了什么

我创建了一个表，每行都有按钮。我想给每个按钮一个唯一的id。该id将是我通过调用API获得的JSONObject。以下是我目前的代码：

function display(data){

    var resultdiv = document.getElementById('resultdiv');
    var table = document.createElement('TABLE');
    table.style.margin = "auto";

    var tbody = document.createElement('TBODY');
    table.appendChild(tbody);

        for (var i=0; i<10; i++){

        var store_is = "Closed";
        if (data.businesses[i].is_closed == false){
            store_is = "Open";
        }
        
        var tr = document.createElement('TR');
        var td1 = document.createElement('TD');
        var td2 = document.createElement('TD');
        var td3 = document.createElement('TD');
        var td4 = document.createElement('TD');

        var img = document.createElement("img");
        img.src = data.businesses[i].image_url;
        img.style.width = "100px";
        img.style.height="100px";

        var btn = document.createElement('button');
        btn.innerHTML = "<i class='fas fa-angle-double-right' style='color:#7E3131;'></i>";
        btn.style.borderRadius="8px";
        btn.style.backgroundColor="#F0B27A";
        btn.style.borderColor="#F0B27A";
        btn.style.marginLeft="5px;"
        btn.id = data.businesses[i].id;

        td1.appendChild(img);
        td2.appendChild(document.createTextNode(data.businesses[i].name));
        td3.appendChild(document.createTextNode(store_is));
        td4.appendChild(btn);

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tbody.appendChild(tr);
   
    }
    resultdiv.appendChild(table);

    
    btn.addEventListener("click" ,function(){

        switch(btn.id){
            case data.businesses[0].id:
                alert(data.businesses[0].name);
                break;
            case data.businesses[1].id:
                alert(data.businesses[1].name);
                break;
            case data.businesses[2].id:
                alert(data.businesses[2].name);
                break;
            case data.businesses[3].id:
                alert(data.businesses[3].name);
                break;
            case data.businesses[4].id:
                alert(data.businesses[4].name);
                break;
            case data.businesses[5].id:
                alert(data.businesses[5].name);
                break;
            case data.businesses[6].id:
                alert(data.businesses[6].name);
                break;
            case data.businesses[7].id:
                alert(data.businesses[7].name);
                break;
            case data.businesses[8].id:
                alert(data.businesses[8].name);
                break;
            case data.businesses[9].id:
                alert(data.businesses[9].name);
                break;
            default:
                alert("Error Sorry");
        }

    })
    
}

功能显示（数据）{
var resultdiv=document.getElementById（'resultdiv'）；
var table=document.createElement（'table'）；
table.style.margin=“自动”；
var tbody=document.createElement（'tbody'）；
表3.儿童（t身体）；
对于（var i=0；i在
for循环
中移动
btn
的事件侦听器，而不是在
for循环
中使用
var
，使用
let
如下：

for (let i=0; i<10; i++){

    //your codes

}

用于（让我=0；我可以回答你的问题吗？嗨@KienHT，我没有在浏览器上运行它。我使用的是yelp的fusion api，在浏览器上运行时有cors策略错误。我在物理设备上运行它。到目前为止，它运行得很好，没有崩溃。@imu margaux我会更进一步，建议只使用
let
。）没有理由使用
var
而改用
let
将帮助您避免此类混淆。您好！感谢您的帮助！我将eventlistener移到了内部，并将for循环更改为
let
，但最后一个id是
业务[9].id
仍在所有按钮上。您是否已将
var btn=…
更改为
let btn=…
了？将所有
var
s替换为
let
s.@RockySims谢谢！这很有效。我习惯于一直使用
var
，我从不使用
let
谢谢！@lm u margaux是对的，您很好应该开始使用
let
而不是
var
。这是一个很好的做法。对于吊装，
var
使调试变得更困难