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:

first


        
      

Answer 1

To expand on the solution provided by @rock star I added two small additions to the function. First it is better to add / reemove a class (with an associated style rule) to an element than directly applying the stylerule to the element.

Secondly - on the click event - this will now remove the red class (and therefore style) from the previously selected element and add it to the new element. This will allow only one element to be red at a time (in the original solution any element that was clicked would become red).

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

function fun1() {
  var oldLink = document.getElementsByClassName('red')[0];
  if(oldLink) {oldLink.classList.remove('red')};
  this.classList.add('red');
}

.red {
 color:red;
}

first
second
third