Объект Javascript в массиве не печатается

Question

Объект Javascript в массиве не печатается

0

Я создал пустой массив, а также глобальный массив. Затем я заполняю пустой массив тремя пустыми объектами из HTML-формы. В Google Chrome распечатывается три объекта, введенных в HTML-форму, но HTML не печатает его в таблице.

Как распечатать их в таблице HTML, используя 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 ); 
    }

IslandKing 14 март 2014, в 01:35

Источник

Теги:

javascript

html

html5

2 ответа

0

Просто добавьте 2 foward-косые черты, и все должно быть хорошо.

elipesso 13 март 2014, в 22:54

Ещё вопросы

76484 · Accepted Answer · 2014-03-13T23-13-00.000Z

Честно говоря, я думаю, что с вашим кодом очень много. Я предоставляю ниже то, что, по моему мнению, является улучшенным примером, и я включаю в качестве комментариев замечания, которые, я надеюсь, помогут вам понять ваши ошибки.

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

Спасибо 76484. Это блестяще. Можно ли вывести длину массива, используя цикл?
Нет необходимости использовать цикл for. 'length' является свойством объекта Array. Вы можете получить это так: allPeople.length