JS中如何获取动态创建元素的ID？按钮点击事件怎么写？

原代码存在的问题 #

• likeNumber未初始化，且所有卡片共用同一变量，无法实现独立计数
• 动态生成的按钮未绑定点击事件，且无法通过常规选择器直接获取

方案一：创建元素时直接绑定点击事件 #

利用let的块级作用域特性，给每个按钮单独绑定事件，同时为每个人维护独立的点赞数：

// 扩展people对象，添加点赞数字段初始化
var people = {
    name: ['Jack', 'Jacob', 'Jessy', 'Ashley', 'Simon', 'Kate'],
    job: ['CEO', 'R&D', 'Accountant', 'Sales Agent', 'Sales Agent', 'Sales Agent'],
    likeCount: [0, 0, 0, 0, 0, 0] // 每人初始点赞数为0
};

for (let i = 0; i < people.name.length; i++) {
    const freeDiv = document.createElement("div");
    cardBoxDiv.appendChild(freeDiv);
    // 构建卡片HTML，用span包裹点赞数方便后续更新
    freeDiv.innerHTML = `
        <img width="150" src="/assets/img${i}.png">
        <br><br>
        <p>${people.name[i]}</p>
        <p>${people.job[i]}</p>
        <hr>
        <button>Click here to like</button>
        <p>${people.name[i]}'s like number:<br><span class="like-count">${people.likeCount[i]}</span></p>
    `;

    // 获取当前卡片内的按钮和点赞数元素
    const likeBtn = freeDiv.querySelector('button');
    const likeCountEl = freeDiv.querySelector('.like-count');

    // 绑定点击事件，更新对应数据和DOM
    likeBtn.onclick = function() {
        people.likeCount[i]++;
        likeCountEl.textContent = people.likeCount[i];
    };
}

方案二：事件委托（适合大量卡片场景） #

通过父元素统一监听点击事件，无需给每个按钮单独绑定，性能更优：

// 初始化点赞数
var people = {
    name: ['Jack', 'Jacob', 'Jessy', 'Ashley', 'Simon', 'Kate'],
    job: ['CEO', 'R&D', 'Accountant', 'Sales Agent', 'Sales Agent', 'Sales Agent'],
    likeCount: [0, 0, 0, 0, 0, 0]
};

for (let i = 0; i < people.name.length; i++) {
    const freeDiv = document.createElement("div");
    freeDiv.dataset.index = i; // 给卡片添加索引标识，关联到对应人员
    cardBoxDiv.appendChild(freeDiv);
    freeDiv.innerHTML = `
        <img width="150" src="/assets/img${i}.png">
        <br><br>
        <p>${people.name[i]}</p>
        <p>${people.job[i]}</p>
        <hr>
        <button>Click here to like</button>
        <p>${people.name[i]}'s like number:<br><span class="like-count">${people.likeCount[i]}</span></p>
    `;
}

// 给父元素cardBoxDiv绑定事件委托
cardBoxDiv.addEventListener('click', function(e) {
    // 判断点击目标是点赞按钮
    if (e.target.tagName === 'BUTTON') {
        // 获取当前卡片的索引
        const card = e.target.closest('div');
        const index = parseInt(card.dataset.index);
        // 更新点赞数并同步到DOM
        people.likeCount[index]++;
        card.querySelector('.like-count').textContent = people.likeCount[index];
    }
});

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