Невозможно запустить функцию с сообщениями getElementsByClassName() WordPress

Question

У меня есть куча постов WordPress, которые выкладываются в сетку 2х8. Я дал им все класс почты. У меня есть следующий код, моя цель состоит в том, чтобы получить div.post, на который я намекаю на цвет, который меняется каждый раз, когда я нахожу его (или другой пост).

var colors = ['rgba(0, 163, 235, 0.7)', 'rgba(209, 28, 9, 0.7)', 'rgba(255, 232, 45, 0.9)', 'rgba(136, 18, 6, 0.7)', 'rgba(0, 110, 159, 0.7)', 'rgba(224, 199, 0, 0.9)']

var i = 0;

var element = document.getElementsByClassName('post');

element.onmouseover = function() {
  console.log("Hello");
  var color = colors[i]
  this.style.backgroundColor = color;
}

element.onmouseout = function() {
  this.style.backgroundColor = "transparent";

  if (i >= 5) {
  i = 0;
  }
  else {
    i++;
  }
}

Когда я делаю getElementById, я могу заставить работать первый, но ни один из остальных (вероятно, потому, что у меня не должно быть одного и того же идентификатора на странице несколько раз, поэтому я вынул его из цикла)

PS Мне нужен ответ без jQuery, пожалуйста. (Я уже знаю, что это проще с jQuery и у меня есть решение в jQuery, но мне было поручено не использовать его)

@nnnnnn получил мой ответ, указав на аналогичный вопрос для всех, кому интересно, это мой рабочий код.

var element = document.getElementsByClassName('post');

for (var i = 0; i < element.length; i++) {
  element[i].onmouseover = function() {
    console.log("Hello");
    var color = colors[j]
    this.style.backgroundColor = color;
  }

  element[i].onmouseout = function() {
    this.style.backgroundColor = "transparent";

    if (j >= 5) {
    j = 0;
    }
    else {
      j++;
    }
  }
}