Почему не работает JS-код?

Question

[Panda21]

Если в alert вместо num подставить document.getElementById("number").value, то работает (возвращает квадрат введенного числа). Почему не работает с переменной num, в которую записан document.getElementById("number").value?

jsfiddle - https://jsfiddle.net/2gkzd861/13/

<div>
  Введите число: <input id="number" type="text">
  <button id="btn">Квадрат числа</button>
</div>

var num = document.getElementById("number").value;
var btn = document.getElementById("btn");
 
btn.addEventListener("click", function getSquareNumber() {
  alert(num*num);
});

Answer 1

[Сергей Соколов]

Разница в том, когда выполняется код.

Первые две строки выполняются сразу при загрузке документа. Переменной num назначается значение пустого на тот момент input'а.

На btn вешается слушатель события. Он не выполняется сразу, а сидит и ждёт события. При каждом возникновении события, выполняется внутренний код функции getSquareNum()

Код внутри функции – вот этот alert() – выполняется позже, при нажатии кнопки. Выводит определённое в самом начале значение num в квадрате. Или же берет свежее, «на сейчас», значение из input'а во втором варианте кода с «если вместо num подставить document.get...».

Comments

[Panda21]

Спасибо за объяснение)
Написала объявление переменной num и присвоение ей значения в самой функции:

var btn = document.getElementById("btn");

btn.addEventListener("click", function getSquareNumber() {
     var num = document.getElementById("number").value;
     alert(num*num);
});

Answer 2

[dollar]

Потому что num - это копия значения элемента.
Лучше сделать так, чтобы num была указателем на сам элемент:

var num = document.getElementById("number"); //здесь value опускаем
var btn = document.getElementById("btn");
 
btn.addEventListener("click", function() {
  alert(num.value*num.value); //получаем текущее значение
});

Comments

[Panda21]

Спасибо)