Question

我想通过点击按钮更改div的背景颜色。

我有3种不同颜色的3个不同按钮。使用这些按钮我想改变我的＆＃34;敌人＆＃34;。

的颜色

＆＃13;

#Enemy {
  border-radius: 25px/25px;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  left: 200;
  z-index: 2;
  color: blue;
  background: black;
}

＆＃13;

<div id='Enemy'></div>

<div id="EnemyColours">
  <h1>Enemy Colour</h1>
  <button type="button" name="bgcE" value="purple">paars</button>
  <button type="button" name="bgcE" value="brown">bruin</button>
  <button type="button" name="bgcE" value="orange">oranje</button>
</div>

＆＃13;

Answer 1

仅使用JavaScript，您只需要将click事件与所有按钮相关联，如下所示：

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

它使用document.querySelectorAll("#EnemyColours button")来获取所有按钮，然后循环遍历它们并附加一个单击处理函数，该函数使用每个按钮value作为background-color div的Enemy。

<强>演示：

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

#Enemy {
  border-radius: 25px/25px;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  left: 200;
  z-index: 2;
  color: blue;
  background: black;
}

<div id='Enemy'>Enemy</div>

<div id="EnemyColours">
  <h1>Enemy Colour</h1>
  <button type="button" name="bgcE" value="purple">paars</button>
  <button type="button" name="bgcE" value="brown">bruin</button>
  <button type="button" name="bgcE" value="orange">oranje</button>
</div>

Answer 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; 
});
}

检查小提琴here。

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

2 个答案: