title: Different results in Javascript
body: <p>I have the below code in JavaScript (not showing the HTML Part, but it works).</p>
  
  <pre><code>var textboxnumber1 = document.querySelector('.number1');
  var textboxnumber2 = document.querySelector('.number2');
  var calcbutton = document.querySelector('.calcbutton');
  
  var num1 = Number(textboxnumber1.value);
  var num2 = Number(textboxnumber2.value);
  
  function writenumbers() 
  {
      window.alert(num1);
  }
  
  calcbutton.addEventListener('click', writenumbers);
  </code></pre>
  
  <p>This returns me 0 as the num1 value,</p>
  
  <p>However, If i replace <code>window.alert(num1);</code> with <code>window.alert(Number(textboxnumber1.value));</code> i get it's value correctly.</p>
  
  <p>Why <code>num1</code> is not showing the value?</p>