- Теория
- Теория
Обработчик событий onchange
Мы научились добавлять класс новостям только из одной категории. Для этого мы сравнили значение data-атрибута каждой новости со строкой, которую прописали вручную. Но нам нужно сравнивать его с категорией, которую пользователь выбрал в фильтре. Тогда фильтрация будет происходить автоматически.
Фильтр на главной странице — это выпадающий список с категориями новостей.
Пользователь может выбрать одну из предложенных категорий. Выбранное значение хранится в свойстве value самого списка.
// Находим выпадающий список
let select = document.querySelector('select');
// Выводим значение в консоль
console.log(select.value);
Нам нужно получать значение фильтра, когда пользователь выбирает новую категорию. Для этого используем обработчик событий onchange
(переводится с английского как «при изменении»). Этот обработчик срабатывает, когда пользователь выбирает новое значение из выпадающего списка.
// Добавляем обработчик событий
select.onchange = function () {
// Выводим в консоль новое значение
console.log(select.value);
};
На новостном сайте фильтр — это элемент с классом filter
. Найдём его, сохраним в переменную и добавим обработчик событий onchange
. После этого скажем JavaScript выводить значение фильтра в консоль и по очереди выберем несколько категорий из списка.
Обработчик событий onchange
можно использовать с разными элементами. Например, он срабатывает, когда пользователь переключает чекбокс или радиокнопки.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.