JavaScript對象不打印

我已經創建了一個空數組，也是一個全球性陣列。然後使用HTML表單中的三個空對象填充空數組。在谷歌瀏覽器中，它打印出HTML表單中輸入的三個對象，但HTML不會將其打印在表格中。JavaScript對象不打印

如何使用的getElementById HMTL下面出生登記的簡單的日期

<body> 
    <h1>Birth Registration</h1> 
    <hr /> 
    <form id ="inputFrom"> 
    <label>First Name: 
     <input type='text' id='firstname' value='Enter your name Here' /> 
    </label> 
    <label>Last Name: 
     <input type='text' id='lastname' value='Enter your name Here' /> 
    </label> 
    <label for="size_1">D.O.B:</label><input type="date" name="size" id="birthDate" value="dd/mm/yy" /> 
    <input type='button' onclick='regBirth()' value='Add new person'/> 
    </form> 
    <hr /> 
    <table id="details"> 
     <tr> 
     <th>First NameName</th> 
     <th>Last Name</th> 
     <th>Date of Birth</th> 
     </tr> 

    </table> 
    <h4>Statistics</h1> 
    <hr /> 
    <h5>Total Count:</h5><p id="count"></p> 
    </body> 
    </html>

JS下面

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<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); 
    }

來源

2014-03-13 IslandKing

坦率地說，我覺得有很多你的代碼錯誤。我在下面提供了我認爲是一個改進的示例，並且我將包括作爲註釋說明，希望能夠幫助您理解錯誤。

function regBirth() { 
    // myArray should be instantiated as an object and not as an array 
    // because you are assigning object properties to it 
    // (and you should change its name ('person' seems appropriate)) 
    var myArray = {}; 
    myArray.fname = document.getElementById('firstname').value; 
    myArray.lname = document.getElementById('lastname').value; 
    myArray.dob = document.getElementById('birthDate').value; 

    // you need to add myArray to allPeople 
    // if you want allPeople to hold all of your people 
    allPeople.push(myArray); 

    // use var when you create tabularForm 
    // so that it is not added to global scope 
    var inputForm = document.getElementById("inputFrom").reset(); 
    var tabularForm = document.createDocumentFragment(); 
    var tablerow = document.createElement('tr'); 

    // there is no need to iterate through the allPeople array 
    // you just need to append to the dom the latest person (ie., myArray) 
    var fname = document.createElement('td'); 
    // assigning an object (iteration) to innerHTML is wrong 
    // you want to assign the object property, in this case: myArray.fname 
    fname.innerHTML = myArray.fname; 
    tablerow.appendChild(fname); 

    var lname = document.createElement('td'); 
    lname.innerHTML = myArray.lname; 
    tablerow.appendChild(lname); 

    var dob = document.createElement('td'); 
    dob.innerHTML = myArray.dob; 
    tablerow.appendChild(dob); 

    tabularForm.appendChild(tablerow); 
    document.getElementById("details").appendChild(tabularForm); 
}

來源

2014-03-14 01:07:39 76484

謝謝76484..That是輝煌..是否有可能使用for循環輸出數組長度？ – IslandKing

沒有必要使用for循環。 'length'是Array對象的一個屬性。你可以像這樣得到它：allPeople.length – 76484

我打印出來的HTML表格只需添加一個2 FOWARD - 一切都應該沒問題。

來源

2014-03-14 00:47:22 elipesso

JavaScript對象不打印

回答

相關問題