Question

我开始使用javascript。我有两个按钮，并且在点击任何这些按钮时想要更改 backgroundColor 。但我的代码不起作用。这是我的代码：

document.getElementsByTagName("button").addEventListener("click", function(){
    func(this)
});

function func(element){
    element.style.backgroundColor="gray";
}

<div id="area">
    <button type="button" class="btn" id="btn1">Play With Me!</button>
    <button type="button" class="btn" id="btn2">Play With Me!</button>
</div>

addEventListener是否有任何方式可以处理多个元素？

Answer 1

最好的方法是在代码中尽可能少地使用事件侦听器。因此，您可以将1个单个事件侦听器附加到corpus = [] for i in range(len(data) -1): corpus.append(data[i]['body'] + data[i+1]['body']) print(corpus) div，而不是将事件侦听器附加到每个按钮，并根据area属性进行适当的更改。

运行以下工作代码段：

event.target

document.getElementById('area').addEventListener('click', function(event) {
  func(event.target);
});

function func(element) {
  element.style.backgroundColor = "blue";
}

Answer 2

您可以这样做或DEMO

 var button = document.getElementsByTagName("button");
 for (var i = 0; i < button.length; i++) {
   button[i].addEventListener("click", function() {
     this.style.backgroundColor = "gray";
   });
 }

<div id="area">
  <button type="button" class="btn" id="btn1">Play With Me!</button>
  <button type="button" class="btn" id="btn2">Play With Me!</button>
</div>

Answer 3

试试这个

<button type="button" onclick="myFunction()">Set background color</button>
<button type="button" onclick="myFunction()">Set background color</button>

<script>
function myFunction() {
    document.body.style.backgroundColor = "red";
}
</script>

addEventListener包含多个元素

3 个答案: