Javascript 循环仅对最后一个元素应用onclick

我正在尝试将onclick事件应用于具有for of循环的某些元素。 问题是它只对列表的最后一个元素应用onclick 我找不到问题所在

这是应用onclick的函数：

assign_onclick_output_header = element_id => {
    const id = element_id+"-output"
    const output = document.getElementById(id)
    const output_header = output.getElementsByClassName('card-header')[0]

    output_header.onclick = () => { 
        const state = output_header.classList.contains('opened')
        console.log(state)
        if (state) {
            output_header.classList.remove('opened')
        } else {
            output_header.classList.add('opened')
        }
    }
}

这是一个调用函数的函数，该函数使用循环应用onclick：

execute = async () => {
    for (const platform_id of this.platforms_ids) {
        const data = {
            platform_id:platform_id,
            command:this.command
        }

        const resp = await this.fetch_output(data)
        this.assign_onclick_output_header(platform_id)
    }
}

平台ID值：

platforms_ids: (4) [598, 612, 641, 671]

HTML：

<div id="output-container" class="card-body">
<div class="card mt-3" id="598-output">
    <div class="card-header" style="cursor:pointer">euroformac (86.109.107.51)</div>
    <div class="card-body">some content</div></div>
<div class="card mt-3" id="612-output">
    <div class="card-header" style="cursor:pointer">fponline (86.109.107.54)</div>
    <div class="card-body">Some content</div>
</div>
<div class="card mt-3" id="641-output">
    <div class="card-header" style="cursor:pointer">formad (86.109.107.239)</div>
    <div class="card-body">Some content</div>
</div>
<div class="card mt-3" id="671-output">
    <div class="card-header" style="cursor:pointer">pen (176.28.115.54)</div>
    <div class="card-body">Some content</div>
</div>

euroformac（86.109.107.51）
一些内容
fponline（86.109.107.54）
一些内容
表格（86.109.107.239）
一些内容
钢笔（176.28.115.54）
一些内容

我试着调试，但找不到bug

---

谢谢大家。

无论您为什么需要这种方式，都可以使用诸如异步生成器之类的高级js功能来完成。必须为of循环设置异步

，而不是同步循环。最后，
card header
元素将获得onclick处理程序，因此，在单击它们之后，它们的背景将是橙色的


assign\u onclick\u output\u header=element\u id=>{
常量id=元素_id+“-输出”；
常量输出=document.getElementById（id）；
const output_header=output.getElementsByClassName（'card-header'）[0]；
output_header.onclick=（）=>{
const state=output_header.classList.contains（'opened'）
如果（州）{
输出头.classList.remove（'opened'）
}否则{
输出标题.classList.add（'opened'）
}
}
}
异步函数*getData（ids）{
//模拟ajax调用
用于（让平台\u id为id）{
等待新的承诺（解决=>{
setTimeout（resolve，2000）；
});
屈服平台id；
}
}
（异步（）=>{
让gen=getData（[598612641671]）；
等待（让发电机的平台id）{
分配点击输出标题（平台id）；
}
})();
。已打开{
背景颜色：橙色；
}

euroformac（86.109.107.51）
一些内容

fponline（86.109.107.54）
一些内容

表格（86.109.107.239）
一些内容

钢笔（176.28.115.54）
一些内容

你能给我们看一下这个.platforms\u ids
中的值以及它正在搜索的HTML吗？@AngelQuesada你确定你真的为id=“598 output”和id=“output container”关闭了“s”吗？谢谢@curveball！我编辑了html来发布它，但忘记了那部分；）