Почему не могу получить значение input?

Question

[Артур]

Добрый вечер, объясните добрые люди, почему не работает этот код?

<button type="button" id="sec">Calculate</button>
<input id="a-side" class="input-a" type="number"/>
<script>
var ab = document.getElementById("a-side");
var a = ab.value;
var ui = document.getElementById("sec");
ui.addEventListener('click', function(){
  alert(a)
} );
</script>

Переменные называл на скорую руку.Мне суть интересна, все ведь по стандартам...синтаксис имею ввиду.
Спасибо за ответы.

Answer 1

[Дмитрий Дерепко]

<button type="button" id="sec">Calculate</button>
<input id="a-side" class="input-a" type="number"/>

document.getElementById("sec").addEventListener('click', function(){
    const input = document.getElementById("a-side");
    alert(input.value);
} );

Comments

[Артур]

А почему нельзя присвоить input.value в переменную? Я попробовал использоватьvalue уже при вызове alert. Все работает.

[Дмитрий Дерепко]

Артур, дело в том, что при присваивании value в переменную, вы берете значение, которое было при загрузке страницы. когда вы его меняете, оно уже не изменится.
Сохраняется элемент в переменную (ссылка на элемент), а потом в любом обработчике element.value вернет актуальное состояние value элемента.