我无法将addEventListener应用于每个＆＃39; .word＆＃39;类

Question

当我点击我的＆＃39;。词＆＃39;时，我试图让某些事情发生。 class，如果我只针对一个（使用document.querySelector），它就可以工作。但是我想用课程＆＃39; .words＆＃39;来定位每个元素。并在我点击它们时应用更改。出于某种原因，我无法弄清楚如何做到这一点。这是我的代码：

var food = document.querySelectorAll('.words');
function chicken()  {
   for (let i = 0; i < food.length; i++){
     if(food[i].style.color === 'white'){
       food[i].style.color = 'red';
     } else if(food[i].style.color === 'red'){
       food[i].style.color = 'blue';
     } else {
       food[i].style.color = 'white';
     }
   }
}

food[i].addEventListener('click', chicken, false);