Почему не работает document.querySelectorAll?

Question

[Glowww]

Не выписывает все элементы div с классом owl-item active.

document.addEventListener('DOMContentLoaded', () => {

	const mediaFiles = document.querySelectorAll('div.owl-item active');
	let i = 0

	Array.from(mediaFiles).forEach((file) => {
		file.onload = () => {
			console.log(file);
			i++

			percents.innerHTML = ((i * 100) / mediaFiles.length).toFixed(1)

			if(i === mediaFiles.length) {
				preloader.classList.add('preloader--hide')
				percents.innerHTML = 100
			}
		}
	})

})

Comments

[Сергей Сергей]

'div.owl-item.active'

[Вадим]

Сергей Сергей, в ответы этого господина!

[Glowww]

Сергей Сергей, всё равно не выводит в консоли, даже если просто оставить ('div')

[Сергей Сергей]

Разметочку и условия появления элементов.

Answer 1

[Дима Паутов]

Во первых, селектор не верный.
Было
div.owl-item active
Нада
div.owl-item.active

Во вторых, вы по всей видимости, используете слайдер owl-carousel.

Инициализация библиотеки происходит после события DOMContentLoaded.
DOMContentLoaded говорит нам о том, что весь html загружен, а не то, что все скрипты загрузились и отработали.

После инициализации слайдера, карусель меняет классы динамически, т.е. в вашем коде не учитывается тот факт, что слайдер ещё не инициализировался. Ибо ваш код тупо срабатывает раньше инициализации слайдера! Поэтому вы ищите ещё не существующие селекторы!

Вам нужно прослушать событие у слайдера, которое символизирует, что слайдер проинициализирован и готов к работе. https://owlcarousel2.github.io/OwlCarousel2/docs/a..., а именно, судя по доке, вам нужно событие initialized.owl.carousel

Comments

[Glowww]

Не помогает смена события. Вовсе не срабатывает initialized.owl.carousel

[Дима Паутов]

Glowww, какая ещё смена события?

var owl = $('.owl-carousel');
owl.owlCarousel();

owl.on('initialized.owl.carousel', function(event) {
  const mediaFiles = document.querySelectorAll('.owl-item.active');
  let i = 0

  Array.from(mediaFiles).forEach((file) => {
    file.onload = () => {
      console.log(file);
      i++

      percents.innerHTML = ((i * 100) / mediaFiles.length).toFixed(1)

      if(i === mediaFiles.length) {
        preloader.classList.add('preloader--hide')
        percents.innerHTML = 100
      }
    }
  })
})

Вот так вот просто нельзя сделать?

[Glowww]

Благодарю, допустил одну ошибку