Не работает событие onload

Question

После загрузки страницы сверху должен выезжать блок, как здесь:

Пробовал сделать вот так:

const freeShipping = document.querySelector('.free_shipping');

freeShipping.addEventListener('load', function() {
  freeShipping.classList.add('active5');
})

<div class="free_shipping">
  <span class="label_in_freeShipping">Бесплатная доставка iPhone на следующий рабочий день по Москве и Санкт‑Петербургу (при наличии товара и заказе до 15:00).</span>
</div>

.free_shipping {
  -moz-transition: all 500ms;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  background-color: #f2f2f2;
  margin: 0 0 0% 0;
  width: 100%;
  height: 2.5%;
  display: flex;
  position: relative;
  z-index: -1;
  top: -5%
}

.active5 {
  top: 5%;
  -moz-transition: all 500ms;
  -webkit-transition: all 500ms;
  transition: all 500ms;
}

Потом вот так:

function activeBlock() {
  document.querySelector('.free_shipping').classList.add('active5');
}

<div class="free_shipping" onload="activeBlock()">
  <span class="label_in_freeShipping">Бесплатная доставка iPhone на следующий рабочий день по Москве и Санкт‑Петербургу (при наличии товара и заказе до 15:00).</span>
</div>

Что не так?

Answer 1

Попробуйте так:

window.onload = function () {
    const freeShipping = document.querySelector('.free_shipping');
    freeShipping.classList.add('active5');
}

Answer 2

Вероятно к моменту запуска скрипта в DOM отсутствует нужный элемент. Запускайте ваш скрипт в конце страницы.

БЛОГ НА HUSL

Не работает событие onload

Ответы (2 шт):