JS OnChange: Everything You Need to Know

JS onchange («изменение» на английском языке) - это событие, которое происходит при изменении значения элемента формы. Когда пользователь вводит данные в форму и изменяет значение элемента, функция onchange вызывается автоматически.

Пример в HTML:

html

Пример в JS:

javascript
function myFunction() {
  const input = document.querySelector('input');
  console.log('Input value changed to: ' + input.value);
}

В данном примере, когда пользователь изменяет текст в поле ввода, функция myFunction вызывается и выводит значение значения текстового поля в консоль.

Еще один пример использования события onchange - это применение его для динамического обновления содержимого страницы.

Например, мы можем использовать событие onchange для создания динамических фильтров для нашего списка товаров на странице. Пользователь может выбирать опции в фильтрах, и когда они выбраны, список товаров обновляется, чтобы показать только товары, соответствующие выбранным опциям.

html

  All
  Books
  Electronics
  Clothing

javascript
function filterProducts() {
  const select = document.getElementById('category');
  const selectedValue = select.options[select.selectedIndex].value;
  const products = document.querySelectorAll('.product');
  for (let i = 0; i < products.length; i++) {
    if (selectedValue === 'books' && !products[i].classList.contains('book')) {
      products[i].style.display = 'none';
    } else if (selectedValue === 'electronics' && !products[i].classList.contains('electronic')) {
      products[i].style.display = 'none';
    } else if (selectedValue === 'clothing' && !products[i].classList.contains('clothing')) {
      products[i].style.display = 'none';
    } else {
      products[i].style.display = '';
    }
  }
}

В этом примере, когда пользователь выбирает опцию в выпадающем списке, функция filterProducts() вызывается, и она фильтрует товары на странице на основе выбранных значений в списке.

В обоих примерах, onchange используется для отслеживания изменения значения элементов формы, и в конечном итоге, используется для обновления содержимого страницы.