Мы научились добавлять класс новостям только из одной категории. Для этого мы сравнили значение data-атрибута каждой новости со строкой, которую прописали вручную. Но нам нужно сравнивать его с категорией, которую пользователь выбрал в фильтре. Тогда фильтрация будет происходить автоматически.

Фильтр на главной странице — это выпадающий список с категориями новостей.

Пользователь может выбрать одну из предложенных категорий. Выбранное значение хранится в свойстве value самого списка.

// Находим выпадающий список
let select = document.querySelector('select');

// Выводим значение в консоль
console.log(select.value);

Нам нужно получать значение фильтра, когда пользователь выбирает новую категорию. Для этого используем обработчик событий onchange (переводится с английского как «при изменении»). Этот обработчик срабатывает, когда пользователь выбирает новое значение из выпадающего списка.

// Добавляем обработчик событий
select.onchange = function () {

  // Выводим в консоль новое значение
  console.log(select.value);
};

На новостном сайте фильтр — это элемент с классом filter. Найдём его, сохраним в переменную и добавим обработчик событий onchange. После этого скажем JavaScript выводить значение фильтра в консоль и по очереди выберем несколько категорий из списка.