Форма с помощью которой добавлять юзера

by RomanFF

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>users</h1>
  <table cellspacing="5" cellpadding="10" border="1" width="100%">
    <tr class='cloneNameSurname'>
        <td class = 'name'>Имя</td>
        <td class = 'surname'>Фамилия</td>
      </tr>
      <tr>
        <td><input type="text" placeholder="usersName" class='usersName'></td>
        <td><input type="text" placeholder="usersSurname" class ='usersSurname'></td>
        <td><button class="addUsers">добавить</button></td>
      </tr>
  </table>
</body>
</html>

JavaScript

/* Дана таблица с юзерами с двумя колонками: имя и фамилия. Под таблицей сделайте форму, с помощью которой можно будет добавить нового юзера в таблицу. Сделайте так, чтобы при клике на любую ячейку появлялся prompt, с помощью которого можно изменить текст ячейки. Задачу решите с помощью делегирования (то есть событие должно быть навешано на table). */

let table = document.querySelector('table');
table.addEventListener('click', addNewUsers);
console.log(table.firstElementChild.firstElementChild)

function addNewUsers(e) {
  if (e.target.className == 'addUsers') {
    if (document.querySelector('.usersName').value.length !== 0 && document.querySelector('.usersSurname').value.length !== 0) {
      let newLine = document.querySelector('.cloneNameSurname').cloneNode(true);
      newLine.firstElementChild.innerHTML = document.querySelector('.usersName').value;
      newLine.lastElementChild.innerHTML = document.querySelector('.usersSurname').value;
      table.firstElementChild.firstElementChild.nextElementSibling.before(newLine);
    }
  }
if(e.target.className == 'name'){
    e.target.innerHTML = prompt('Новое имя','');
     }
     if(e.target.className == 'surname'){
    e.target.innerHTML = prompt('Новая фамилия','');
     
}
}