title: Printing array in a table? Javascript / HTML
body: <p>In this project i have to make a diary and one of the criteria is a table that tally's the number of appointments that have been input previously. Currently this is my script, it works however, when i there are multiple years, the tally only recognises the first year, and doesn't tally the second. it instead recognises it as NaN. Could someone please help and point out where i'm going wrong. Thanks a ton :)</p>
  <pre><code>    &lt;html&gt;
  
  &lt;head&gt;
      &lt;script&gt;
          const MIN_YEAR = 2019;
          var dates = [];
          var priArr = [];
          var years = [];
          var list = [];
          let appointment = {
              date: &quot;&quot;,
              startTime: &quot;&quot;,
              endTime: &quot;&quot;,
              subject: &quot;&quot;,
              venue: &quot;&quot;,
              rowData: function () {
                  return &quot;&lt;tr&gt;&lt;td&gt;&quot; + this.date + &quot;&lt;/td&gt;&lt;td&gt;&quot; + this.startTime + &quot;&lt;/td&gt;&lt;td&gt;&quot; + this.endTime + &quot;&lt;/td&gt;&lt;td&gt;&quot; + this.subject + &quot;&lt;/td&gt;&lt;td&gt;&quot; + this.venue + &quot;&lt;/td&gt;&lt;td&gt;&quot; + this.priority + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;;
              }
          }
  
          let yearSumm = {
              year: &quot;&quot;,
              count: &quot;&quot;
          }
          /*
          year: &quot;&quot;,
              count: &quot;&quot;,
              rowYear: function () {
                  return &quot;&lt;tr&gt;&lt;td&gt;&quot; + years[i] + &quot;&lt;/td&gt;&lt;td&gt;&quot; + count[i] + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;;
              }
  */
          function addAppointment() {
  
              const isDateValid = validDate()
  
              let newAppointment = Object.create(appointment);
              var startIndex = document.getElementById('startTime').selectedIndex;
              var priority;
  
              newAppointment.startTime = document.getElementById('startTime').options[startIndex].value;
              newAppointment.subject = document.getElementById('subject').value;
              newAppointment.venue = document.getElementById('venue').value;
  
  
              if (isDateValid != false) { newAppointment.date = isDateValid; }
  
              if (validTime != false) { newAppointment.endTime = validTime(); }
  
              if (document.getElementById('medium').checked) { priority = medium.value; }
  
              else if (document.getElementById('low').checked) { priority = low.value; }
  
              else { priority = high.value; }
  
  
  
              newAppointment.priority = priority;
  
  
              if (isDateValid === null | isDateValid === undefined | validTime() === null | validTime() === undefined | validTime() === false | isDateValid === false | isConcurrentAppointment(newAppointment.date, newAppointment.startTime, newAppointment.endTime) != true) {
                  alert('Date or time entry invalid')
              }
              else {
                  list.push(newAppointment);
                  priArr.push(priority);
                  dates.push(isDateValid)
                  let tbody = document.getElementById(&quot;tbody&quot;);
                  tbody.innerHTML += newAppointment.rowData();
  
              }
          }
  
          function validDate() {
              var inputDate = document.getElementById('date').value
              var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
              if (inputDate.match(dateformat)) {
                  document.getElementById('date').focus();
                  var opera1 = inputDate.split('/');
                  var opera2 = inputDate.split('-');
                  lopera1 = opera1.length;
                  lopera2 = opera2.length;
                  if (lopera1 &gt; 1) {
                      var pdate = inputDate.split('/');
                  }
                  else if (lopera2 &gt; 1) {
                      var pdate = inputDate.split('-');
                  }
                  var dd = parseInt(pdate[0]);
                  var mm = parseInt(pdate[1]);
                  var yy = parseInt(pdate[2]);
                  if (yy &lt;= MIN_YEAR) {
                      alert('Date is invalid.');
                      return error;
                  }
  
                  var daysInMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                  if (mm == 1 || mm &gt; 2) {
                      if (dd &gt; daysInMonths[mm - 1]) {
                          alert('Date is invalid.');
                          return error;
                      }
                  }
                  if (mm == 2) {
                      var lyear = false;
                      if ((!(yy % 4) &amp;&amp; yy % 100) || !(yy % 400)) {
                          lyear = true;
                      }
                      if ((lyear == false) &amp;&amp; (dd &gt;= 29)) {
                          alert('Date is invalid');
                          return error;
                      }
                      if ((lyear == true) &amp;&amp; (dd &gt; 29)) {
                          alert('Date is invalid.');
                          return error;
                      }
                  }
              }
              else {
                  alert('Date is invalid.');
                  document.getElementById('date').focus();
                  return error;
              }
              return inputDate;
  
          }
          //--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------      
          function validTime() {
              var startIndex = document.getElementById('startTime').selectedIndex;
              var appStartTime = document.getElementById('startTime').options[startIndex].value;
              var endIndex = document.getElementById('endTime').selectedIndex;
              var endTime = document.getElementById('endTime').options[endIndex].value;
              if (endTime &lt;= appStartTime) {
                  alert(&quot;Appointment must end later than the start time.&quot;);
                  return error;
              }
              return endTime;
          }
  
          //-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
          function isConcurrentAppointment(dateInput, startInput, endInput) {
              var i;
              for (i = 0; i &lt; list.length; i++) {
                  if (dateInput == list[i].date) {
                      if (startInput.substring(0, 3) == list[i].startTime.substring(0, 3)
                          || startInput.substring(0, 3) &lt; list[i].startTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) &gt; list[i].endTime.substring(0, 3)
                          || startInput.substring(0, 3) == list[i].startTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) &gt;= list[i].endTime.substring(0, 3)
                          || startInput.substring(0, 3) &gt; list[i].startTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) &gt; list[i].endTime.substring(0, 3) &amp;&amp; startInput.substring(0, 3) &lt; list[i].endTime.substring(0, 3)
                          || startInput.substring(0, 3) &gt; list[i].startTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) &lt; list[i].endTime.substring(0, 3)
                          || startInput.substring(0, 3) &lt; list[i].startTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) &lt; list[i].endTime.substring(0, 3) &amp;&amp; endTime.substring(0, 3) &gt; list[i].startTime.substring(0, 3)
                          || startInput.substring(0, 3) &gt;= list[i].endTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) &lt;= list[i].endTime.substring(0, 3)
                          || startInput.substring(0, 3) &gt; list[i].startTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) == list[i].endTime.substring(0, 3)
                          || startInput.substring(0, 3) == list[i].startTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) == list[i].endTime.substring(0, 3)
                          || startInput.substring(0, 3) &lt; list[i].startTime.substring(0, 3) &amp;&amp; endInput.substring(0, 3) == list[i].endTime.substring(0, 3)) {
                          alert('Appointments cannot start of end while another appointment is running');
                          return false
                      }
  
                  }
                  else
                      return true
              }
              return true
          }
  
  
          //----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
          //Tallying function:
          var i = 0;                
          var count = 0;
          var output = '';
          var tally = new Array();
  
          // Tally of years
          function summary(year) {
  
              var val = document.getElementById('tallyOption').value
              if (val == 'year') {
                  thead1.innerHTML = (&quot;&lt;td&gt;&quot; + 'Year' + &quot;&lt;/td&gt;&quot; + &quot;&lt;td&gt;&quot; + 'Appointments' + &quot;&lt;/td&gt;&quot;);
  
  
                  for (i = 0; i &lt; years.length; i++) {
                      tally[i] = 0;
                  }
  
                  for (i = 0; i &lt; dates.length; i++) {
                      var year = dates[i].toString().split('/')
                      var year = parseInt(year[2]);
                      if (years.indexOf(year) == -1) {
                          years.push(year);
                          tally[i] = 1;
                      }
                      else {
                          tally[i] +=1;
                      }
                  }
  
  
                  output += '&lt;table border=&quot;1&quot;&gt;';
                  output += '&lt;tr&gt;&lt;th&gt;Years&lt;/th&gt;&lt;th&gt;Tally&lt;/th&gt;&lt;/tr&gt;';
                  for (i = 0; i &lt; years.length; i++) {
                      output += '&lt;tr&gt;&lt;td&gt;' + years[i] + '&lt;/td&gt;&lt;td&gt;';
                      for (var j = 0; j &lt; tally[i]; j++) {
                          output += '$';
                      }
                      output += '&lt;/td&gt;&lt;/tr&gt;';
                  }
  
                  output += '&lt;/table&gt;';
                  document.writeln(output);
  
  
                  return year;
                  return count;
  
              }
  
  
  
              //Tallying Dates?
  
  
          }
  
  
  
      &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  
  
  &lt;body&gt;
  
      &lt;title&gt;Diary&lt;/title&gt;
      &lt;h1 style=&quot;text-align: center;&quot;&gt;Diary&lt;/h1&gt;
      &lt;form&gt;
          &lt;table bgcolor=&quot;#cccccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt;
              &lt;tr&gt;
                  &lt;td align=&quot;right&quot;&gt;Date&lt;/td&gt;
                  &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;date&quot; name=&quot;date&quot; size=&quot;10&quot;&gt;&lt;/td&gt;
                  &lt;td align=&quot;right&quot;&gt;Start Time&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select id=&quot;startTime&quot;&gt;
                          &lt;option value=&quot;08:00&quot;&gt;08:00&lt;/option&gt;
                          &lt;option value=&quot;09:00&quot;&gt;09:00&lt;/option&gt;
                          &lt;option value=&quot;10:00&quot;&gt;10:00&lt;/option&gt;
                          &lt;option value=&quot;11:00&quot;&gt;11:00&lt;/option&gt;
                          &lt;option value=&quot;12:00&quot;&gt;12:00&lt;/option&gt;
                          &lt;option value=&quot;13:00&quot;&gt;13:00&lt;/option&gt;
                          &lt;option value=&quot;14:00&quot;&gt;14:00&lt;/option&gt;
                          &lt;option value=&quot;15:00&quot;&gt;15:00&lt;/option&gt;
                          &lt;option value=&quot;16:00&quot;&gt;16:00&lt;/option&gt;
                          &lt;option value=&quot;17:00&quot;&gt;17:00&lt;/option&gt;
                          &lt;option value=&quot;18:00&quot;&gt;18:00&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td align=&quot;right&quot;&gt;End Time&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select id=&quot;endTime&quot;&gt;
                          &lt;option value=&quot;08:00&quot;&gt;08:00&lt;/option&gt;
                          &lt;option value=&quot;09:00&quot;&gt;09:00&lt;/option&gt;
                          &lt;option value=&quot;10:00&quot;&gt;10:00&lt;/option&gt;
                          &lt;option value=&quot;11:00&quot;&gt;11:00&lt;/option&gt;
                          &lt;option value=&quot;12:00&quot;&gt;12:00&lt;/option&gt;
                          &lt;option value=&quot;13:00&quot;&gt;13:00&lt;/option&gt;
                          &lt;option value=&quot;14:00&quot;&gt;14:00&lt;/option&gt;
                          &lt;option value=&quot;15:00&quot;&gt;15:00&lt;/option&gt;
                          &lt;option value=&quot;16:00&quot;&gt;16:00&lt;/option&gt;
                          &lt;option value=&quot;17:00&quot;&gt;17:00&lt;/option&gt;
                          &lt;option value=&quot;18:00&quot;&gt;18:00&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
  
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td align=&quot;right&quot;&gt;Subject:&lt;/td&gt;
                  &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;subject&quot; size=&quot;10&quot;&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td align=&quot;right&quot;&gt;Venue:&lt;/td&gt;
                  &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;venue&quot; size=&quot;10&quot;&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td valign=&quot;top&quot; align=&quot;center&quot;&gt;Priority&lt;/td&gt;
                  &lt;td&gt;&lt;input type=&quot;radio&quot; id=&quot;high&quot; name=&quot;Priority&quot; value=&quot;High&quot; checked=&quot;true&quot; /&gt; High&lt;br /&gt;
                  &lt;td&gt;&lt;input type=&quot;radio&quot; id=&quot;medium&quot; name=&quot;Priority&quot; value=&quot;Medium&quot; /&gt; Medium&lt;br /&gt;
                  &lt;td&gt;&lt;input type=&quot;radio&quot; id=&quot;low&quot; name=&quot;Priority&quot; value=&quot;Low&quot; /&gt; Low&lt;br /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;tr&gt;
              &lt;div style=&quot;text-align:center;&quot;&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;&lt;input type=&quot;button&quot; value=&quot;Add Appointment&quot; onclick=&quot;addAppointment()&quot; /&gt;&lt;/td&gt;
              &lt;/div&gt;
          &lt;/tr&gt;
  
  
          &lt;hr&gt;
  
          &lt;div&gt;
              &lt;table align=&quot;center&quot; width=&quot;80%&quot; height=&quot;150px&quot; cellpadding=&quot;1px&quot; cellspacing=&quot;1px&quot; border=&quot;1&quot; id=&quot;table1&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th width=&quot;50&quot;&gt;Date&lt;/th&gt;
                          &lt;th width=&quot;20&quot;&gt;Start&lt;/th&gt;
                          &lt;th width=&quot;20&quot;&gt;End&lt;/th&gt;
                          &lt;th width=&quot;75&quot;&gt;Subject&lt;/th&gt;
                          &lt;th width=&quot;60&quot;&gt;Venue&lt;/th&gt;
                          &lt;th width=&quot;5&quot;&gt;Priority&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody id=&quot;tbody&quot;&gt; &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;div style=&quot;text-align:center;&quot;&gt;
                  &lt;td&gt;&lt;/td&gt;&lt;input type=&quot;reset&quot; value=&quot;Randomise Appointments&quot; onclick=&quot;shuffleAppointments()&quot; /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;&lt;input type=&quot;button&quot; value=&quot;Sort Appointments&quot; onclick=&quot;sortRecords()&quot; /&gt;&lt;/td&gt;
                  &lt;td&gt;by&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select id=&quot;Date&quot;&gt;
                          &lt;option value=&quot;date&quot;&gt;Date&lt;/option&gt;
                          &lt;option value=&quot;startTime&quot;&gt;Start Time&lt;/option&gt;
                          &lt;option value=&quot;endTime&quot;&gt;End Time&lt;/option&gt;
                          &lt;option value=&quot;subject&quot;&gt;Subject&lt;/option&gt;
                          &lt;option value=&quot;venue&quot;&gt;Venue&lt;/option&gt;
                          &lt;option value=&quot;priority&quot;&gt;Priority&lt;/option&gt;
                      &lt;/select&gt;
              &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;hr&gt;
  
          &lt;div&gt;
              &lt;table border=&quot;1&quot;&gt;
                  &lt;thead id=&quot;thead1&quot;&gt;
                  &lt;/thead&gt;
                  &lt;tbody id=&quot;tbody2&quot;&gt;&lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
  
  
          &lt;div style=&quot;text-align:left;&quot;&gt;
              &lt;td&gt;&lt;/td&gt;&lt;input type=&quot;button&quot; value=&quot;Summary&quot; onclick=&quot;summary()&quot; /&gt;&lt;/td&gt;
              &lt;td&gt;by&lt;/td&gt;
              &lt;td&gt;
                  &lt;select id=&quot;tallyOption&quot;&gt;
                      &lt;option value=&quot;year&quot;&gt;Year&lt;/option&gt;
                      &lt;option value=&quot;date&quot;&gt;Date&lt;/option&gt;
                      &lt;option value=&quot;optPriority&quot;&gt;Priority&lt;/option&gt;
                  &lt;/select&gt;
          &lt;/div&gt;
          &lt;/hr&gt;
  
  
      &lt;/form&gt;
  </code></pre>