Не работает скрипт добавления класса?

Question

[Тимофей Шариков]

Имеется код:
HTML

<div class="advantages_grid">
    <p class="advantages__text_27px">01 / Более шести лет на рынке</p>
    <p class="advantages__text_27px">02 / Работаем без предоплаты</p>
    <p class="advantages__text_27px">03 / Выполняем работу в установленный срок</p>
    <p class="advantages__text_27px">04 / Используем качественные материалы</p>
    <p class="advantages__text_27px">05 / Не понравится - вернём деньги</p>
    <p class="advantages__text_27px">06 / Обговоренная цена не изменится</p>
</div>
<script src="JS/optimizeAdvantages.js"></script>

JS

function addNotActiveClass() {
	if (window.innerWidth < 600) {
		const paragraphs = document.querySelectorAll('.advantages_grid p');
		for (let i = 0; i < paragraphs.length; i++) {
			paragraphs[i].classList.add('not-active');
		}
	}
}

addNotActiveClass();

Мне нужно при условии, что ширина экрана меньше 600px добавить к элементам p внутри div с классом advantages_grid добавить класс not-activ. Данный скрипт не работает, не знаю в чем проблема. Подскажите пожалуйста, где ошибка

Answer 1

[romkhram]

const paragraphs = document.querySelectorAll('.advantages_grid p');
const addNotActiveClass = () => {
  paragraphs.forEach(x => x.classList.add('not-active'))
}
const removeNotActiveClass = () => {
  paragraphs.forEach(x => x.classList.remove('not-active'))
}

const calcWindow = () => {
  if (window.innerWidth < 600) {
    addNotActiveClass()
  } else {
    removeNotActiveClass()
  }
}

document.addEventListener('DOMContentLoaded', () => {
  calcWindow()
});

window.addEventListener("resize", (e) => {
  calcWindow()
});

https://codepen.io/romkhram/pen/wvYWNwL

Comments

[Сергей delphinpro]

Прослушку события resize следует заменить на matchMedia

[Тимофей Шариков]

Спасибо!

[Сергей delphinpro]

const p = document.querySelectorAll('.advantages_grid p');
const toggleClass = state => p.forEach(x => x.classList.toggle('not-active', state));

function handle(mql) {
    toggleClass(mql.matches);
}

const mediaQueryList = window.matchMedia('(max-width: 600px)');
handle(mediaQueryList);
mediaQueryList.addEventListener('change', handle);

Answer 2

[Zarron]

Вытащи
<script src="JS/optimizeAdvantages.js"></script>
из div, так нельзя, блок прогрузиться не успел ты ему пытаешься класс пихнуть, вот и не работает

Comments

[Тимофей Шариков]

Не сработало

[Zarron]

Тимофей Шариков, Можно файл html, по случайности можно допустить ошибку и там, и верно ли указан путь к js файлу?

[Тимофей Шариков]

Zarron, все проверено раз пять)