JavaScript

Как поймать value элемента в JavaScript

Чтобы поймать value элемента в JavaScript, сначала найдите элемент через querySelector, затем обратитесь к свойству .value. Для текстового поля это выглядит так: input.value. Обычно значение читают в обработчике события input, change или submit

Минимальный пример:

<input id="name" type="text" placeholder="Введите имя">
<p id="result"></p>

<script>
  const input = document.querySelector("#name");
  const result = document.querySelector("#result");

  input.addEventListener("input", () => {
    result.textContent = input.value;
  });
</script>

Когда пользователь вводит текст, значение поля появляется в абзаце

Что такое value

value — это текущее значение элемента формы. У input, textarea и select оно обычно отражает то, что выбрал или ввел пользователь

Пример:

const input = document.querySelector("#name");
console.log(input.value);

Если поле пустое, результат будет пустой строкой:

""

Это не null и не undefined. Это именно строка без символов

input и change: в чем разница

Событие input срабатывает почти сразу при изменении текста:

input.addEventListener("input", () => {
  console.log(input.value);
});

Событие change обычно срабатывает позже, когда пользователь закончил изменение поля:

input.addEventListener("change", () => {
  console.log(input.value);
});

Для живого поиска, счетчика символов и подсказок удобнее input. Для выбора из списка или финальной проверки формы часто подходит change

Пример с textarea

<textarea id="message"></textarea>
<button id="send">Показать</button>
<pre id="output"></pre>

<script>
  const message = document.querySelector("#message");
  const send = document.querySelector("#send");
  const output = document.querySelector("#output");

  send.addEventListener("click", () => {
    output.textContent = message.value;
  });
</script>

textarea.value работает так же, как input.value

Пример с select

<select id="city">
  <option value="kazan">Казань</option>
  <option value="moscow">Москва</option>
  <option value="spb">Санкт-Петербург</option>
</select>

<p id="cityResult"></p>

<script>
  const city = document.querySelector("#city");
  const cityResult = document.querySelector("#cityResult");

  city.addEventListener("change", () => {
    cityResult.textContent = `Выбрано: ${city.value}`;
  });
</script>

В value попадет значение из атрибута value, а не обязательно видимый текст option

Пример с отправкой формы

В формах значение часто читают при отправке:

<form id="form">
  <input id="email" type="email" placeholder="Email">
  <button>Отправить</button>
</form>
<p id="message"></p>

<script>
  const form = document.querySelector("#form");
  const email = document.querySelector("#email");
  const message = document.querySelector("#message");

  form.addEventListener("submit", (event) => {
    event.preventDefault();

    const value = email.value.trim();

    if (value === "") {
      message.textContent = "Введите email";
      return;
    }

    message.textContent = `Отправляем: ${value}`;
  });
</script>

event.preventDefault() нужен, чтобы страница не перезагрузилась сразу после нажатия кнопки. Так вы успеете проверить значение и вывести сообщение

value и textContent

Это разные вещи:

Свойство	Для чего
`value`	значение поля формы
`textContent`	текст внутри обычного HTML-элемента

Для input используйте:

input.value

Для абзаца или заголовка:

paragraph.textContent

Если написать input.textContent, вы почти наверняка получите не то, что ожидаете

Частые ошибки

Читать value до ввода пользователя

Если код выполняется сразу при загрузке страницы, поле может быть пустым. Читайте значение внутри события или после действия пользователя

Забыть #

Если элемент имеет id="name", селектор должен быть:

document.querySelector("#name")

Без # браузер будет искать тег <name>, а не id

Не проверять пустую строку

if (input.value.trim() === "") {
  console.log("Поле пустое");
}

trim() убирает пробелы по краям, чтобы строка из одних пробелов не прошла проверку

Читать value у элемента, у которого его нет

У обычного div или p нет полезного пользовательского value. Если нужно взять текст абзаца, используйте:

paragraph.textContent

Если нужно взять значение поля, используйте:

input.value

Мини-задание

Сделайте форму с полем email и кнопкой. По клику проверьте, есть ли в email.value символ @. Если есть, выведите Похоже на email, если нет — Проверьте адрес

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

0 комментариев

Старые

Новые Популярные