Получение ввода из html в javascript

Question

поэтому я понял, как заставить код работать, но я не понимаю, почему он работает таким образом

var notaEx = document.getElementById("nota-ex").value;
    
function calculate () {
  console.log(notaEx);
}

<input type="text" id="nota-ex"/>
<button onclick="calculate();">Button</button>

Рабочая версия

var notaEx = document.getElementById("nota-ex");

function calculate () {
  console.log(notaEx.value);
}

<input type="text" id="nota-ex"/>
<button onclick="calculate();">Button</butto>

может кто-нибудь объяснить, почему вторая версия работает, а первая нет?

Answer 1

позвольте мне объяснить

 <button onclick="calculate();"></button>

см. Ваш html код, вы просите его получить функцию с именем calculate, но в вашей js первой версии функция называется calculeaza

function calculeaza () {
   console.log(notaEx);
} 

поэтому, когда вы нажимаете кнопку, она не работает, пока имя функции второй версии совпадает с именем функции, определенным в кнопке

 function calculate () {
   console.log(notaEx);
 }