如何使用 ForEach 更改背景的按钮？

Question

我想用 JS 创建 4 个按钮，仅使用 ForEach 更改容器的背景。我已经使用 foreach 准备好了 4 个按钮，但背景的颜色没有改变。有什么帮助吗？这是我的代码：let color_ar = ["yellow", "green", "blue", "silver"];let buttons_ar = ["btn btn-warning", "btn btn-success", "btn btn-primary", "btn btn-secondary"];window.onload = function() {    createBtn();}function createBtn() {    buttons_ar.forEach(function(item, i) {        document.querySelector("#id_container").innerHTML += `<button id="id_button" class="${item}">${color_ar[i]}</button>`        document.querySelector("#id_button").addEventListener("click", function() {            i = 0;            document.querySelector("#id_container").style.background = color_ar[i++];        });    })}

Answer 1

您使用的id_button是点击，它仅适用于第一项，因为 ID 是唯一的。

这是一种做你想做的事的方法

const color_ar = ["yellow", "green", "blue", "silver"],

  buttons_ar = ["btn btn-warning", "btn btn-success", "btn btn-primary", "btn btn-secondary"];

function createBtn() {

  buttons_ar.forEach((item, i) => {

    document.querySelector("#id_container").innerHTML += `<button id="id_button" class="${item}">${color_ar[i]}</button>`

    document.querySelectorAll('.btn').forEach(el => el.addEventListener('click', e => e.currentTarget.parentElement.style.background = e.currentTarget.textContent))

  })

}

window.addEventListener('load', () => {

  createBtn();

})

<div id='id_container'></div>