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
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 используется для отслеживания изменения значения элементов формы, и в конечном итоге, используется для обновления содержимого страницы.