Почему document.getElementById('serachLink').value ничего не выводит?

Question

[Игорь Перегудов]

var serachLink = document.getElementById('serachLink');
console.log(serachLink.value);

var serachLink = document.getElementById('serachLink').value;
console.log(serachLink);

Первый вариант отрабатывает, а второй почему то ничего не выводит, почему так?

var searchLink = document.getElementById('searchLink');
var searchBtn = document.getElementById('searchBtn');

searchBtn.addEventListener('click', function() {
    console.log(searchLink.value); //отрабатывает
});

var searchLink = document.getElementById('searchLink').value;
var searchBtn = document.getElementById('searchBtn');

searchBtn.addEventListener('click', function() {
    console.log(searchLink); //не отрабатывает
});

<input id="searchLink" type="text" class="link" placeholder="Вставьте ссылку">
<button id="searchBtn" type="button" class="btn">go</button>

в инпут ввожу - потом клацаю по кнопке

Answer 1

[Negwereth]

Во втором примере кода вы сохраняете изначальное значение поля value, которое в этот момент равняется пустой строке. При сохранении данных примитивных типов в переменную в неё копируется значение. Судя по всему, вы хотели получить прямую ссылку на это поле, и выводить значение по ней. В этом случае так не будет работать.

Чтобы получать значение из поля value, вам надо обращаться к полю объекта при каждом клике. Что вы можете закешировать, то есть сохранить ссылку, так это ссылку на элемент input, как и реализовано в вашем первом примере.

Comments

[Игорь Перегудов]

спасибо за ответ, хотел лишь спросить, если использовать jQuery, оно отрабатывает так же?

[Negwereth]

Игорь Перегудов: наверное, jQuery же не более, чем обёртка над чистым JS. Мой вам совет - учите чистый JS, не нужен вам jQuery.

[Игорь Перегудов]

Negwereth: я сейчас и стараюсь писать на чистом :)

[Negwereth]

Игорь Перегудов: вот и продолжайте )

Answer 2

[Виталий]

serachLink точно ид элемента серач? А не серч? Да и было бы неплозо сам тэг описать в вопросе. А то гадалок тут мало

Comments

[Игорь Перегудов]

))) точно, очепятка блин

[Виталий]

Игорь Перегудов: проблема решена чтоль?

[Игорь Перегудов]

Виталий: не правильно выразился :)
serachLink точно ид элемента серач? - точно ид элемента

[Игорь Перегудов]

в теле вопроса прикрепил описание