После нажатия на одну кнопку - обработчик второй кнопки не срабатывает

Question

Есть 2 кнопки, по клику первый нажатый обработчик срабатывает, делает всё что нужно , а второй после первого уже не работает.

JS :

'use strict';
var row = "<tr><td></td><td></td><td></td><td></td></tr>";
var col = "<td></td>";
var addBp = '<button  class="field__addButton field__addButton_right">+</button>';
var addBdown
var fullfield = document.getElementsByTagName('div')[0];
var field = document.getElementsByTagName('table');
var ButtonDown = document.getElementsByClassName('field__addButton_down')[0];
var ButtonRight = document.getElementsByClassName('field__addButton_right')[0];
var deleteButton = document.getElementsByClassName('field__deleteButton');
ButtonDown.addEventListener("click", onBottomButtonClick);
ButtonRight.addEventListener("click", onRightButtonClick);
/deleteButton[0].addEventListener("click", onLeftButtonClick);
deleteButton[1].addEventListener("click", onTopButtonClick);
/
///////////////////////////////////////////////////////////////////////////////////////////////////////////
/Add Buttons/
///////////////////////////////////////////////////////////////////////////////////////////////////////////
function onBottomButtonClick(event) {
  event.target.remove();
  document.querySelector('table tbody').innerHTML += '<tr></tr>';
  for (var i = 0; i < document.querySelector('tr').cells.length; i++) {
    document.querySelector('tr:last-child').innerHTML += '<td></td>';
  }
  ButtonDown = document.querySelector('tr:last-child td:nth-child(2)').insertBefore(event.target, null);
}
function onRightButtonClick(event) {
  event.target.remove();
for (var i = 0; i < document.querySelectorAll('tr').length; i++) {
    document.querySelectorAll('tr')[i].innerHTML += '<td></td>';
  }
  ButtonRight = document.querySelector('tr:nth-child(2) td:last-child').insertBefore(event.target, null);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////
/Delete Buttons/
///////////////////////////////////////////////////////////////////////////////////////////////////////////
function onTopButtonClick() {
  for (var i = 0; i < document.getElementsByClassName('field')[0].getElementsByTagName('tr').length; i++) {
    document.getElementsByClassName('field')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[0].remove();
  }
  deleteButton[1].style.opacity = 0;
  ButtonRight.style.left = parseInt(ButtonRight.style.left) - 52 + 'px';
}
function onLeftButtonClick() {
  document.getElementsByClassName('field')[0].getElementsByTagName('tr')[0].remove();
  ButtonDown.style.top = parseInt(ButtonDown.style.top) - 52 + 'px';
  deleteButton[0].style.opacity = 0;
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////
function showButtons() {
  deleteButton[0].style.visibility = 'visible';
  deleteButton[1].style.visibility = 'visible';
}
function hideButtons() {
  deleteButton[0].style.visibility = 'hidden';
  deleteButton[1].style.visibility = 'hidden';
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////
/Onmouseover function/
///////////////////////////////////////////////////////////////////////////////////////////////////////////
fullfield.onmouseover = function(event) {
  var target = event.target;
  if (target.matches('td:first-child') || target.matches('tr:first-child td') || target.matches('td:last-child') || target.matches('tr:last-child td')) {
} else {
    document.querySelector('tr').cells[target.cellIndex].innerHTML = '<button class="field__deleteButton  field__deleteButton_left">-</button>';
    document.querySelector('table').rows[target.parentElement.rowIndex].cells[0].innerHTML = '<button class="field__deleteButton  field__deleteButton_left">-</button>';
  }
}
fullfield.onmouseout = function(event) {
  var target = event.target;
  if (target.matches('td:first-child') || target.matches('tr:first-child td') || target.matches('td:last-child') || target.matches('tr:last-child td')) {
} else {
    ///  document.querySelector('tr').cells[target.cellIndex].innerHTML= '';
    ///  document.querySelector('table').rows[target.parentElement.rowIndex].cells[0].innerHTML= '';
  }
}
document.getElementsByClassName('field__deleteButton')[0].onmouseover = function() {
}
/*
deleteButton[0].onmouseout = function(){
    hideButtons();
deleteButton[1].onmouseover = function(){
    this.style.visibility = 'visible';
}
deleteButton[1].onmouseout = function(){
    hideButtons();
}*/

* {
  margin: 0;
  padding: 0;
}

table {
  position: relative;
  /*top: 50px;
        left:50px;*/
  border-spacing: 0;
  outline: 1px solid white;
  box-sizing: border-box;
}

.field__deleteButton {
  background: #af0100 !important;
  box-sizing: border-box;
}

.field__deleteButton_top {
  outline: 5px solid rgba(0, 0, 0, 0);
}

table tr:first-child td,
tr:last-child td {
  background: none;
  border: none;
}

table tr td:first-child,
tr td:last-child {
  background: none;
  border: none;
}

td {
  border: 1px solid white;
}

td,
.field__addButton,
.field__deleteButton {
  width: 50px;
  height: 50px;
  background: #4cabe3;
  position: relative;
}

button {
  border: none;
  font-size: 30px;
  color: white;
}

.field__addButton {
  background: #f0a41b;
  border: none;
}

.field__deleteButton:hover {
  background: #c84d4c !important;
  visibility: visible;
}

.field__addButton:hover {
  background: #f5bf5c !important;
}

.field {
  position: relative;
  display: inline-block;
  margin: 55px 0 0 55px;
  outline: 2px solid #4cabe3;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>НАЧАЛО РАБОТЫ С BRACKETS</title>
  <meta name="description" content="Интерактивное руководство по началу работы в Brackets.">
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div class=field>
    <table>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td><button class="field__addButton field__addButton_right">+</button></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td><button class="field__addButton field__addButton_down">+</button></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Answer 1

Ошибка в том, что при использовании innerHTML вы переписываете всё новыми элементами и на них нет обработчиков событий. Я исправил вам это и теперь всё работает через appendChild:

function onBottomButtonClick(event)
{
    event.target.remove();

    document.querySelector('table tbody').appendChild(document.createElement('tr'));
    for(var i = 0; i < document.querySelector('tr').cells.length; i++)
    {
        document.querySelector('tr:last-child').appendChild(document.createElement('td'));
    }
    document.querySelector('tr:last-child td:nth-child(2)').appendChild(event.target);
}

function onRightButtonClick(event)
{
    event.target.remove();
    var trs = document.querySelectorAll('tr');

    for(var i = 0; i < trs.length; i++)
    {
        trs[i].appendChild(document.createElement('td'));
    }
    document.querySelector('tr:nth-child(2) td:last-child').appendChild(event.target);
}

Советую вам найти и почитать несколько книг по программированию на чистом JS.