JS получить значение input

В данном уроке мы рассмотрим способы, с помощью которых можно получить значение инпута через JavaScript. Пусть у нас есть следующий инпут:

<input value="text">

Получим ссылку на этот инпут с помощью метода querySelector:

let input = document.querySelector('input');

Расмотрим различные варианты получения значения инпута.

Вариант 1

Получим и выведем значение инпута:

let value = input.value; console.log(value);

Вариант 2

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

Для этого навесим на инпут обработчик потери фокуса:

input.addEventListener('blur', function() { });

А теперь по потери фокуса получим и выведем значение инпута:

input.addEventListener('blur', function() { let value = this.value; console.log(value); });