title: Can't get the Typed value of HTML5 Number Inputs in Javascript
body: <p>I want to create a Retirement Calculator. I am stuck on getting the value that someone types for their current age and the age they want to retire at, so I can subtract the retiring age by the current age to get the number of years to calculate. I want to get the value's typed after I submit the button and I want it to show up as an alert or console.log() it just to know it works. Right now it is showing [object MouseEvent] instead of the number I want to show up. Any help would be greatly appreciated. I'm not that good at JavaScript yet but need to figure this out for a site. </p>
  
  <p>I've tried .value and .innerHTML. I've tried Name functions, and anonymous functions, local and global variables, etc. </p>
  
  <pre><code>$(function () {
     $(".number-input").keydown(function (e) {
         if ((e.keyCode == 65 &amp;&amp; (e.ctrlKey === true || e.metaKey === true)) ||
           (e.keyCode &gt;= 35 &amp;&amp; e.keyCode &lt;= 40) ||
           $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1) {
           return;
        }
        if ((e.shiftKey || (e.keyCode &lt; 48 || e.keyCode &gt; 57)) &amp;&amp;
           (e.keyCode &lt; 96 || e.keyCode &gt; 105)) {
            e.preventDefault();
        }
     });
  });
    // Variables
  var currentAge = document.getElementById('age-current');
  
  var retireAge = document.getElementById('age-retire');
  
  var monthlyInvestment = document.getElementById('monthly-investment');
  
  var annualReturn = document.getElementById('annual-return');
  
    // Limit # of Characters Functions
  currentAge.oninput = function () {
    if(this.value.length &gt; 2) {
      this.value = this.value.slice(0,2);
    }
  }
  
  retireAge.oninput = function() {
    if(this.value.length &gt; 2){
      this.value = this.value.slice(0,2);
    }
  }
  
  monthlyInvestment.oninput = function (){
    if(this.value.length &gt; 6){
      this.value = this.value.slice(0,6);
    }
  }
  
  annualReturn.oninput = function () {
    if(this.value.length &gt; 6) {
      this.value = this.value.slice(0,6);
    }
  }
  
    // Allow a percentage input
  $(document).on('keydown', 'input[pattern]', function(e){
    var input = $(this);
    var oldVal = input.val();
    var regex = new RegExp(input.attr('pattern'), 'g');
  
    setTimeout(function(){
      var newVal = input.val();
      if(!regex.test(newVal)){
        input.val(oldVal); 
      }
    }, 0);
  });
  
    // JS math to calculate return
  
  // Example Funcgtion futureValue = investment*Math.pow((1+annualRate), 
  years);
  
  
  //Age Value Functions
  
   var currentAge = currentAge.value;
   var retireAge = retireAge.value;
  
  
  
  // Button Submit
  
  function getYears (retireAge, currentAge) {
   years = retireAge - currentAge;
    return years;
  }
  
  var btnSubmit = document.getElementById('submit');
  
  btnSubmit.onclick = function (years){
    alert(years);
  }
  </code></pre>
  
  <p>I want to be able to take the value of both ages (currentAge - retireAge) and have the values stored in var years. Then show in an alert or console.log() when I click the submit button to know that it's working.</p>