title: Return JavaScript age calculation to screen
body: <p>Using HTML 5, CSS, JavaScript and JQuery to create a web application.</p>
  
  <p>I have used the new Date() function in order to generate today's date.
  I have also used the JQuery "datepicker" function in order to allow the user to select their DOB. These are both working perfectly.</p>
  
  <p>What I want is for the age to be calculated when the DOB has been selected.
  I have included a function to calculate the age which relies on the date and DOB but cannot get it to return the number to the screen.  This can be seen below.</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;Age:&lt;/td&gt;
      &lt;!--td&gt;&lt;input type="text" id="age" /&gt;&lt;/td--&gt;
      &lt;td&gt; 
              &lt;script type = "text/javascript"&gt;
          var date = document.getElementById("adDate").value
          var dob = document.getElementById("datepicker").value
          var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/
          if (pattern. test(dob)) {
              var currentYear = date.getFullYear()
              var birthYear = date.getFullYear()
              var age = currentYear - birthYear
              document.write(age)
          } 
          &lt;/script&gt;
      &lt;td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I have search for solutions on-line but just get the basic JavaScript age calculation. 
  Any help would be much appreciated.</p>
  
  <p>Many Thanks.</p>
  
  <p>I tried to apply some changes so to no avail. 
  I have updated the JS which is shown below.</p>
  
  <pre><code>var date = document.getElementById("adDate").value
  var dob = document.getElementById("datepicker").value
  var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/
  if (pattern. test(dob)) {
      var currentYear = new Date(date).getFullYear()
      var birthYear = new Date(dob).getFullYear()
      var age = currentYear - birthYear
  
      var spanAge = document.getElementById("age")
      spanAge.innerHTML = age
  } 
  </code></pre>
  
  <p>And also the HTML.</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;Age:&lt;/td&gt;
      &lt;td&gt;&lt;span id="age"&gt;&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>It must be something to do with using the datepicker to generate the DOB.  I tried applying an onSelect function but nothing seems to work.</p>
  
  <p>Any other advice?</p>