javascript - Binding an event listener to multiple elements with the same class

Question

I'm trying to apply the onclick event with JavaScript to the following elements:

<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>

If I click on the first element (with index [0]) then this works, but I need this event applicable for all classes:

document.getElementsByClassName('abc')[0].onclick="function(){fun1();}";
function  fun1(){
document.getElementsByClassName('abc').style.color="red"; 
}

Answer 1

.onclick does not expect to receive a string, and in fact you don't need an extra function at all.

However, to assign it to each element, use a loop, like I'm sure you must have learned about in a beginner tutorial.

var els = document.getElementsByClassName('abc');
for (var i = 0; i < els.length; i++) {
  els[i].onclick = fun1;
}

function fun1() {
  this.style.color = "red";
}

<div class="abc">first</div>
<div class="abc">second</div>
<div class="abc">third</div>