• Теория
  • Теория

Обработчик событий onchange

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

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

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

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

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

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

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

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

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

Обработчик событий onchange можно использовать с разными элементами. Например, он срабатывает, когда пользователь переключает чекбокс или радиокнопки.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Только 5 дней цена 18 900 ₽22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Прокрутка и операторы» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.