I have a loop, in which I want to change the class of each element upon click. In the first instance below it works fine, but once an eventListener is inserted, I receive an error, where am I going wrong in accessing each individual element passed through the loop?

Error Message:

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at HTMLTableCellElement.<anonymous> 

Working example:

 function classSetter() {
    var divs = document.querySelectorAll('td.event'), i;
    for (i = 0; i < divs.length; ++i) {
     divs[i].classList.add('unClicked');
  }};

Not working example:

window.onload = function classSetter() {
  var divs = document.querySelectorAll('td.event'), i;
   for (i = 0; i < divs.length; ++i) {
    divs[i].addEventListener("click", function() {
     divs[i].classList.add('unClicked');
     })
    }};