Javascript 使用eventlistener而不是内联onclick或jquery，通过按钮更改div的颜色

我想通过点击按钮来改变我的div的背景颜色

我有3个不同的按钮，分别对应3种不同的颜色。用这些按钮，我想改变我的“敌人”的颜色

敌方{ 边界半径：25px/25px； 宽度：25px； 高度：25px； 位置：绝对位置； 排名：0； 左：200； z指数：2； 颜色：蓝色； 背景：黑色； }

敌色
帕尔斯
布鲁因
奥兰杰

仅使用JavaScript，您只需使用所有按钮附加

单击事件，如下所示：

document.querySelectorAll("#EnemyColours button").forEach(function(btn) {
  btn.addEventListener("click", function() {
    document.getElementById("Enemy").style.backgroundColor = this.value;
  });
});

它使用
document.queryselectoral（“EnemyColours按钮”）
获取所有按钮，然后在它们上循环并附加一个单击处理程序函数，该函数将每个按钮
值
用作
敌方
div的
背景色

演示：


document.queryselectoral（#enemycolors按钮”）.forEach（函数（btn）{
btn.addEventListener（“单击”，函数（）{
document.getElementById（“敌人”）.style.backgroundColor=this.value；
});
});
敌方{
边界半径：25px/25px；
宽度：25px；
高度：25px；
位置：绝对位置；
排名：0；
左：200；
z指数：2；
颜色：蓝色；
背景：黑色；
}
敌人
敌色
帕尔斯
布鲁因
奥兰杰
假设您希望保持按钮的名称不变，您可以按照以下方式进行操作

获取所有按钮并向每个按钮添加事件侦听器，如下所示

var buttons = document.getElementsByName("bgcE");
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].addEventListener("click", function(){
document.getElementById("Enemy").style.backgroundColor = this.value; 
});
}

var buttons=document.getElementsByName（“bgcE”）；
对于（变量i=0，len=buttons.length；i

检查小提琴。
您忘记发布您尝试过的JavaScript，向我们显示您被卡住的部分。