Почему, когда я запрашиваю в JS значение тега input в консоль, он ничего не выводит?

Question

[Daniil Tsivinsky]

Код в HTML-формы, значение input которой я запрашиваю через JS:

<form>
  <input type="text" id="input1">    
  <input type="submit" value="Check" id="btn">
</form>

Вот код JS:

function O(i) {
    return document.getElementById(i);
}

let input1 = O('input1').value;

console.log(input1);

А вот, что выдаётся в браузере:

Если выводить не значение input, а сам объект, то всё нормально выводится.

Answer 1

[Михаил]

Выводит
Пустую строку
Ведь в инпут ничего не введено

<input type="text" id="input1" value="aaaaa">

Comments

[Daniil Tsivinsky]

Нет, я не хочу задавать начальное значение. Мне надо, чтобы JS "поймал" то значение, которое ввёл пользователь.

[Михаил]

Daniil Tsivinsky,

Почему, когда я запрашиваю в JS значение тега input в консоль, он ничего не выводит?

Потому что когда вы запрашиваете .value оно пустое, вот пустоту и выводит в консоль

[Daniil Tsivinsky]

Михаил, Так я же пишу в input текст, в данном случае "1". Разве оно не записывается в атрибут value?

[Михаил]

Daniil Tsivinsky, записывается
И? ну записалось оно, дальше что? Что должно произойти? Что вы ожидаете?
Ваш js уже выполнился, никаких обработчиков событий вы не вешали, просто статический js, который исполнился и растворился

[Daniil Tsivinsky]

Михаил, Всё, я понял свою ошибку. Спасибо. Я просто "навесил" на кнопку событие по клику с выводом в консоль и всё заработало. Ещё раз спасибо.

Answer 2

[Banan44]

Вы сразу выполняете js код и в консоль выводится пустота, потому что изначально значение input'а пусто.
Оберните весь код в функцию и присвойте кнопке "check" атрибут onclick="имявашейфункции()"