Как из коллекции, получить Input в котором произошло изменение?
Здрасте. Есть коллекция в которой собраны 4 input. Есть некая функция check(), которую нужно вызвать для input из коллекции у которого произошло изменение значения текстового поля. Есть ли возможность вызвать функцию check() на input только из конкретной коллекции, в котором произошло изменение.
HTML
<div class="block"> <input type="text" class="block__input" /> <input type="text" class="block__input" /> <input type="text" class="block__input" /> <input type="text" class="block__input" /> </div> |
<div class="block"> <input type="text" class="block__input" /> <input type="text" class="block__input" /> <input type="text" class="block__input" /> <input type="text" class="block__input" /> </div>
JS
const blockInputs = document.querySelectorAll(".block__input"); const check = () => { console.log("check succesful") } |
const blockInputs = document.querySelectorAll(".block__input"); const check = () => { console.log("check succesful") }
Дополнительно:
form.addEventListener('change', function(evt){ console.log(evt.target, evt.target.value); }); |
form.addEventListener('change', function(evt){ console.log(evt.target, evt.target.value); });
const inputs = document.querySelectorAll('.block__input') const check = event => console.log('check successful', event.target) inputs.forEach(item => item.oninput = check) |
const inputs = document.querySelectorAll('.block__input') const check = event => console.log('check successful', event.target) inputs.forEach(item => item.oninput = check)
- А есть возможность повесить обработчик событий на каждый элемент перебрав коллекцию? А то если у меня будет допустим 40 инпутов то это как минимум не удобно.
- DZHAMBULAT-SAMOUCHKA, я добавил код
- Все круто, но почему oninput, а не addEventListener?
- Сергей delphinpro, да как-то по vue-привычке, редко пишу это слово )
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы получить Input, в котором произошло изменение в коллекции, можно воспользоваться следующим подходом:
1. Переберите все элементы коллекции и для каждого элемента добавьте обработчик события изменения (change event handler).
2. Внутри обработчика события изменения проверьте, какой именно Input изменился и выполните необходимые действия.
Пример на языке PHP:
// Создаем коллекцию элементов Input $inputs = document.getElementsByTagName("input"); // Перебираем все элементы коллекции foreach ($inputs as $input) { // Добавляем обработчик события изменения $input->addEventListener("change", function() use ($input) { // Проверяем, какой именно Input изменился if ($input->value !== "") { echo "Измененный Input: " . $input->name; } }); }
В данном примере мы создаем коллекцию элементов Input, перебираем их и для каждого элемента добавляем обработчик события изменения. Внутри обработчика мы проверяем значение измененного Input и выводим его имя, если значение не пустое.
Таким образом, вы сможете легко определить и получить Input, в котором произошло изменение в коллекции.