如何为javascript中的按钮提供唯一ID

Question

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

我创建了一个表格，每行都有按钮。我想给每个按钮一个唯一的 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");
        }

    })
    
}

现在，我还想要一个 EventListener，当我单击按钮时，分配给它的 id 会发出警报。问题是我的所有按钮都不起作用，但只有最后一个 ID 为 data.businesses[9].id 的按钮当我在循环中添加事件侦听器时，所有按钮都可以工作，但所有按钮的警报也是 data.businesses[9].id。

不知道如何使这个工作。任何帮助将不胜感激！提前非常感谢您！

Answer 1

将btn 的事件侦听器移动到for loop 中，而不是在for loop 中使用var，而是像这样使用let：

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

    //your codes

}

正如@Elan 所提到的，您在 Javascript 中遇到了闭包问题。供您参考：https://www.w3schools.com/js/js_function_closures.asp