Как считать то, что ввёл пользователь в input, и показать на странице?

Задан 29 месяцев назад212 просмотров2 ответа

Есть поле ввода и кнопка. Хочу, чтобы по нажатию текст из поля выводился ниже. Пробую так, но выводится пусто:

<input id="name">
<button id="go">Показать</button>
<p id="out"></p>

const name = document.getElementById('name');
document.getElementById('go').onclick = function() {
  document.getElementById('out').textContent = 'Привет, ' + name;
};

Выводит Привет, [object HTMLInputElement]. Что не так?

Алиса Михайлова 🐣 Птенец

спросил 29 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

Ты выводишь сам элемент <input>, а не то, что в нём набрано. Чтобы достать введённый текст, нужно свойство .value:

const nameInput = document.getElementById('name');
document.getElementById('go').onclick = function() {
  const text = nameInput.value;   // вот тут .value
  document.getElementById('out').textContent = 'Привет, ' + text;
};

name (элемент) — это «коробка». name.value — то, что в неё написали. Именно .value ты и хочешь показать.

Арина Лебедева 🐣 Птенец

28 месяцев назад

Помни ещё, что .value — всегда строка, даже если пользователь ввёл число. Если хочешь складывать как числа, преобразуй: Number(input.value). Иначе '2' + '3' даст '23', а не 5.

Оксана Баранова 🥚 Яйцо

28 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.