Как добавить новую запись в таблицу?

Question

[Юрий]

В качестве практики делаю товарищу программку по учету его трудовых показателей.
Смысл в чем: по клику на кнопку "Создать новую запись" вываливается окно с инпутами и кнопкой "Создать".
После заполнения инпутов и нажатия кнопки "Создать" должна создаваться новая строчка с готовыми данными и отображаться на странице.
Я пытаюсь это сделать с помощью шаблонной строки. Но не срабатывает схема.
Помогите, подскажите, где что не так?

https://codepen.io/jurij-zibinskij/pen/rNMwYGM

Comments

[Юрий]

Я пытаюсь это сделать с помощью шаблонной строки. Но не срабатывает схема.
Помогите, подскажите, где что не так? )))

Проект здесь:
https://codepen.io/jurij-zibinskij/pen/rNMwYGM

Answer 1

[0xD34F]

Обработчик события submit должен висеть на форме, а не кнопке.
Корневой элемент добавляемой записи (<div class="table">) - лишний.
После добавления новой записи окно с формой наверное надо бы убрать.

modalWindowForm.addEventListener('submit', function(e) {
  e.preventDefault();

  const newNote = `
    <div class="table-line line">
      здесь без изменений, элементы .table-line__item оставляете как есть
    </div>
  `;

  table.innerHTML += newNote;
  // или
  // table.insertAdjacentHTML('beforeend', newNote);

  modalWindow.classList.remove('active');
});

Comments

[Юрий]

Не, не работает. Пишет: "main.js:57 Uncaught TypeError: Cannot read property 'innerHTML' of null
at HTMLFormElement.".

Это вот об этой строке идет речь:

table.innerHTML += newNote;

[0xD34F]

Юрий, работает. Раскомментируйте <div class="table" id="table">.

[Юрий]

Блин ))))) От всей души спасибо! Ларчик-то просто открывался )))

[Юрий]

Раз пошла такая пьянка))) Подскажите, а как после отправки данных очищать данную форму?

[Юрий]

Так, чтобы не подставлять все инпуты типа /// inputDate.value = ''; ///

[0xD34F]

Юрий, this.reset();.

[Юрий]

Еще раз большое спасибо )))