I'm looping through 10 divs with the same class to add event handlers which should change the border on a mouse click. I'm using getElementsByClassName. There is no response to the click on any of the divs. The simple function worked on another div in an event handler.

The html:

<div class="note-small">
    <p>blah</p>
</div>

I used this vanilla JS:

const note_small_class = document.getElementsByClassName('note-small');

for (let i=0; i < note_small_class.length; i++) {
  note_small_class[i].addEventListener('click', () => {
    highlightNote(note_small_class[i]);
  })
};

function highlightNote(note) {
  note.style.background.color = 'red';
};

note_small_class shows as an object (HTML collection) in the console. Something isn't working, I would appreciate any help. Thank you.