Как получить значение input в переменную JavaScript

Значение одного поля

Задайте полю уникальный идентификатор id, а затем получите его значение:

<input type="text" id="name" placeholder="Введите имя">
<button id="showButton">Показать</button>
<p id="result"></p>

<script>
  const nameInput = document.getElementById('name');
  const showButton = document.getElementById('showButton');
  const result = document.getElementById('result');

  showButton.addEventListener('click', () => {
    const name = nameInput.value;
    result.textContent = `Введённое имя: ${name}`;
  });
</script>

В переменной nameInput находится сам HTML-элемент, а в переменной name — текст, введённый в поле. Именно свойство .value возвращает содержимое input.

Значения двух полей

Если нужно получить данные из нескольких полей, обратитесь к каждому из них отдельно:

<input type="text" id="firstName" placeholder="Имя">
<input type="text" id="lastName" placeholder="Фамилия">
<button id="combineButton">Объединить</button>

<script>
  document.getElementById('combineButton').addEventListener('click', () => {
    const firstName = document.getElementById('firstName').value;
    const lastName = document.getElementById('lastName').value;
    const fullName = `${firstName} ${lastName}`;

    console.log(fullName);
  });
</script>

Переменная fullName будет содержать объединённую строку, например Анна Петрова.

Как получить числа из input

Даже если у поля указан тип number, его .value обычно возвращается как строка. Поэтому при математических операциях значение нужно преобразовать:

<input type="number" id="price" value="5">
<input type="number" id="quantity" value="10">
<button id="calculateButton">Посчитать</button>

<script>
  document.getElementById('calculateButton').addEventListener('click', () => {
    const price = Number(document.getElementById('price').value);
    const quantity = Number(document.getElementById('quantity').value);
    const total = price * quantity;

    console.log(total); // 50
  });
</script>

Без Number() выражение 5 + 10 может дать строку "510", а не число 15. Для проверки некорректного ввода можно использовать Number.isNaN().

Несколько способов найти input

Кроме getElementById() можно использовать CSS-селекторы:

const field = document.querySelector('#name');
const fields = document.querySelectorAll('input');

querySelector() возвращает первый подходящий элемент, а querySelectorAll() — коллекцию всех найденных элементов. Для группы полей удобно указать общий класс:

const values = [...document.querySelectorAll('.user-field')]
  .map(input => input.value);

В результате values будет массивом строк.

Что важно учесть

• У каждого id должен быть уникальный идентификатор.
• Переменную объявляют через const, если её значение не переназначается, или через let, если оно будет изменяться.
• Код нужно выполнять после создания HTML-элемента — например, в конце body или после события DOMContentLoaded.
• Для чтения текущего текста используйте .value, а не textContent.

Таким образом, основной шаблон выглядит так:

const value = document.getElementById('inputId').value;

После этого переменную value можно вывести, проверить, передать в функцию или сохранить в объекте и массиве.