title: Javascript Object in Array not printing
body: <p>I have created an empty array and also a global array. I then populate the empty the array with three empty objects from a HTML form. In the Google Chrome, its printing out three objects entered in the HTML form, BUT the HTML is not printing it out in the table.</p>
  
  <p>How can I print them out in the HTML table using getElementById
  HMTL Below
          
          
          Simple Date of Birth Registration
          
          </p>
  
  <pre><code>    &lt;body&gt;
      &lt;h1&gt;Birth Registration&lt;/h1&gt;
      &lt;hr /&gt;
      &lt;form id ="inputFrom"&gt;
      &lt;label&gt;First Name:
        &lt;input type='text' id='firstname'  value='Enter your name Here' /&gt;
      &lt;/label&gt;
      &lt;label&gt;Last Name:
        &lt;input type='text' id='lastname'   value='Enter your name Here' /&gt;
      &lt;/label&gt;
       &lt;label for="size_1"&gt;D.O.B:&lt;/label&gt;&lt;input type="date" name="size" id="birthDate" value="dd/mm/yy" /&gt;
       &lt;input type='button' onclick='regBirth()' value='Add new person'/&gt;
       &lt;/form&gt;
       &lt;hr /&gt;
      &lt;table id="details"&gt;
        &lt;tr&gt;
        &lt;th&gt;First NameName&lt;/th&gt;
        &lt;th&gt;Last Name&lt;/th&gt;
        &lt;th&gt;Date of Birth&lt;/th&gt;
        &lt;/tr&gt;
  
      &lt;/table&gt;
      &lt;h4&gt;Statistics&lt;/h1&gt;
      &lt;hr /&gt;
      &lt;h5&gt;Total Count:&lt;/h5&gt;&lt;p id="count"&gt;&lt;/p&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>JS Below</p>
  
  <pre><code>    var allPeople = [];
      function regBirth(){
  
          var myArray = [];
  
        myArray.fname = document.getElementById('firstname').value ;
  
       myArray.lname =document.getElementById('lastname').value;
  
      myArray.dob=document.getElementById('birthDate').value;
  
      console.log(myArray);
        console.log(allPeople);
        var inputForm = document.getElementById("inputFrom").reset();
  
          tabularForm = document.createDocumentFragment();
          //Table structure variables
          var tablerow;
      for (i=0;i&lt;allPeople.length;i++){
          var iteration = allPeople[i];
              tablerow = document.createElement('tr');
              //first table cell
              myArray.fname  = document.createElement('td');
             myArray.fname .innerHTML = iteration;
              tablerow.appendChild(myArray.fname );
  
              //Second table cell
              myArray.lname = document.createElement('td');
              myArray.lname.innerHTML = iteration;
              tablerow.appendChild(myArray.lname);
  
              //Third table cell 
              myArray.dob = document.createElement('td');
              myArray.dob.innerHTML = iteration;
              tablerow.appendChild(myArray.dob);
  
              //Table row close
               tabularForm .appendChild(tablerow);  
        }
  
      document.getElementById("details").appendChild( tabularForm ); 
      }
  </code></pre>