Javascript forEach代码不起作用，但两个不同forEach函数中的相同代码起作用，为什么？

我有一个名为“filteredTasks”的数组，对于每个任务，我想在Div中创建一个按钮，并向该按钮添加一个onclick函数。我创建了一些代码（您可以在下面的第一个块中看到）来实现这一点。这不起作用，按钮被正确创建，但onclick函数只添加到最后一个按钮。 当我使用完全相同的代码，但分成两个不同的forEach回调（您也可以在下面的第二部分查看），它确实可以工作。 简而言之，当尝试创建按钮并在创建时向每个按钮添加onclick函数时，只有最后一个按钮正确接收onclick函数。但是当我首先创建所有按钮，然后为每个按钮添加onclick函数时，它确实起作用了。我不明白这是为什么。这里有没有更好的开发人员可以向我指出原因？ 非常感谢

        filteredTasks.forEach(function(task) {
            var buttonId = task.taskName.replace(/\s/g, '') + 'Button'
            var taskHTML = `<button class="taskButton" id="${buttonId}">${task.taskName}</button>`;
            taskDiv.innerHTML += taskHTML;
            var button = document.querySelector(`#${buttonId}`);
            button.onclick = function() {performTask(task)};
        });
    };





        filteredTasks.forEach(function(task) {
            var buttonId = task.taskName.replace(/\s/g, '') + 'Button'
            var taskHTML = `<button class="taskButton" id="${buttonId}">${task.taskName}</button>`;
            taskDiv.innerHTML += taskHTML;
        });

        filteredTasks.forEach(function(task) {
            var buttonId = task.taskName.replace(/\s/g, '') + 'Button'
            var button = document.querySelector(`#${buttonId}`);
            button.onclick = function() {performTask(task)};
        });
    };

filteredTasks.forEach（函数（任务）{
var buttonId=task.taskName.replace（/\s/g'）+“按钮”
var taskHTML=`${task.taskName}`；
taskDiv.innerHTML+=taskHTML；
var button=document.querySelector（`${buttonId}`）；
button.onclick=function（）{performTask（task）}；
});
};
filteredTasks.forEach（函数（任务）{
var buttonId=task.taskName.replace（/\s/g'）+“按钮”
var taskHTML=`${task.taskName}`；
taskDiv.innerHTML+=taskHTML；
});
filteredTasks.forEach（函数（任务）{
var buttonId=task.taskName.replace（/\s/g'）+“按钮”
var button=document.querySelector（`${buttonId}`）；
button.onclick=function（）{performTask（task）}；
});
};

我怀疑这与您处理DOM更新的方式有关。您的代码只是将事件添加到最后一个按钮。这是)。使用

forEach

而不是for/loop，但在本例中显然不是这样。（我理解这有点牵强。另一位SO成员可能有更详细的技术原因说明它在这种情况下不起作用。）

也就是说，正如你所发现的，你最好分阶段进行，但你应该再进一步。这将避免陷入你现在的处境，而且会更有效

目前，您正试图在一个循环中实现所有功能：创建任务html，将其添加到DOM，以及将事件侦听器添加到new按钮。您应该做的是创建所有HTML，然后将其添加到DOM中，然后使用它们的类一次选择所有按钮并向它们添加侦听器

const filteredTasks=[{taskName:'bob'}，{taskName:'dave'}]；
const tasks=document.querySelector（“#tasks”）；
//使用“映射”创建所有按钮
//我在这里使用了数据属性，而不是实际的id
const html=filteredTasks.map（任务=>{
const buttonId=`${task.taskName.replace（/\s/g，'）}按钮`；
返回`${task.taskName}`；
}).加入（“”）；
//通过一次更新将该HTML添加到DOM中
tasks.innerHTML=html；
//使用类抓取所有taskButton按钮，
//并向其添加单击侦听器
const buttons=document.queryselectoral（'.taskButton'）；
[…按钮].forEach（按钮=>button.addEventListener（'click'，performTask，false））；
//`performTask`销毁事件目标（单击按钮）
//并记录id
功能性能任务（e）{
const{dataset:{id}}=e.target；
console.log（id）；
}

---

尝试使用createElement而不是串接Strings来创建按钮。能否显示filterTasks内容的示例？为了给您的案例提供一个更合适的示例，非常感谢您的澄清和代码建议！