Добавление объекта js в таблицу html

Question

У меня есть две функции, одна добавляет в массив объектов (студентов) новый объект (нового студента), путём ввода пользователем в элементы формы сведений о нём. Вторая функция выводит данные из массива объектов в таблицу html, подскажите, в чём ошибка

function getArr() {
  let inputAll = Array.from(document.querySelectorAll('#forms input'));
  let arr = [];
  let obj = {};

  let checkFieldsLength = inputAll.every((el) => el.value.length);

  if (checkFieldsLength) {
    for (const input of inputAll) {
      obj[input.id] = input.value;
    }
    arr.push(obj);
    return console.log(arr);
  }
  return alert('Не все поля заполнены');
}

function tabelPush() {
  const titles = [`Фамилия`, `Имя`, `Отчество`, `Дата рождения`, `Год начала обучения`, `Факультет`];

  const arr = [{
    lastName: `Иванов`,
    name: `Иван`,
    middleName: `Иванович`,
    birthday: 2000,
    yearStart: `2014`,
    faculty: `факультет 1`,
  }];

  const createTableStudents = (titles, dataStudents) => {
    const tableString = `
    <table class="table-students">
      <tr>
        ${titles.map(it => `<th>${it}</th>`).join(``)}
      </tr>
      ${dataStudents.map(it => `
      <tr>
        <td>${it.lastName}</td>
        <td>${it.name}</td>
        <td>${it.middleName}</td>
        <td>${it.birthday}</td>
        <td>${it.yearStart}</td>
        <td>${it.faculty}</td>
      </tr>`).join(``)}
    </table>`.trim();

    const div = document.createElement(`div`);
    div.innerHTML = tableString;
    return div.firstChild;
  };

  document.body.appendChild(createTableStudents(titles, arr));
}

tabelPush();

<div id="forms">
  <input id="name" type="text" placeholder="Имя">
  <input id="surname" type="text" placeholder="Фамилия">
  <input id="middleName" type="text" placeholder="Отчество">
  <input id="birthday" type="text" placeholder="Дата рождения">
  <input id="year" type="text" placeholder="Год начала обучения">
  <input id="faculty" type="text" placeholder="Факультет">
  <input type="button" name="button" id="button" value="submit" onclick="getArr()">
</div>

БЛОГ НА HUSL

Добавление объекта js в таблицу html

Ответы (0 шт):