How can I add an onclick event to more than one class with the same class name?

Question

I'm trying to create a timetable site for myself to practice CSS grid and Javascript, I would like to be able to select the 'completed?' section of the timetable and change the div's colour to green. However, I'm having no luck.. so far my code is:

document.getElementsByClassName('tick').onclick = changeBgColor;
function changeBgColor() {
  document.getElementsByClassName('tick').style.backgroundColor = "green";
}

<div class="item tick complete1"></div>
<div class="item tick complete2"></div>
<div class="item tick complete3"></div>
<div class="item tick complete4"></div>
<div class="item tick complete5"></div>
<div class="item tick complete6"></div>
<div class="item tick complete7"></div>

Any help would be appreciated!

`querySelectorAll` plus `forEach`? put one listener on the container and use event delegation? plain `for` loop? — CertainPerformance, Jun 20 '18 at 08:53

score 0 · Accepted Answer · answered Jun 20 '18 at 08:54

You need to loop through all the elements for adding the click event listener. Also use this.style.background = "green"; to change the background color inside click function.

var elem = document.getElementsByClassName('tick');
for(var i=0; i<elem.length; i++){
  elem[i].addEventListener('click', changeBgColor);
}

function changeBgColor() {
 this.style.background = "green";
}

 <div class="item tick complete1">1</div>
 <div class="item tick complete2">2</div>
 <div class="item tick complete3">3</div>
 <div class="item tick complete4">4</div>
 <div class="item tick complete5">5</div>
 <div class="item tick complete6">6</div>
 <div class="item tick complete7">7</div>

score 0 · Answer 2 · answered Jun 20 '18 at 08:54

document.getElementsByClassName returns a collection.Loop over this collection after converting using the spread operator.Use forEach to loop over this array and use addEventListener to add click event

[...document.getElementsByClassName('tick')].forEach(function(item) {
  item.addEventListener('click', changeBgColor)
})


function changeBgColor() {
  this.style.backgroundColor = "green";
}

<div class="item tick complete1">1</div>
<div class="item tick complete2">2</div>
<div class="item tick complete3">3</div>
<div class="item tick complete4">4</div>
<div class="item tick complete5">5</div>
<div class="item tick complete6">6</div>
<div class="item tick complete7">7</div>

How can I add an onclick event to more than one class with the same class name?

2 Answers2