1

Есть 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>

5
  • Если бы вы выложили свой код сюда, а не на jsfiddle.net, то вам бы уже давно помогли. Многие не переходят по таким ссылкам так как jsfiddle.net распространяет вирусы. По крайней мере sitecheck.sucuri.net так говорит. Лично я не хожу по таким ссылкам.
    – Bharatha
    17 мая 2018 в 13:27
  • @Bharata Исправил
    – CTACO23
    18 мая 2018 в 5:54
  • если что ссылочку оставлю: jsfiddle.net/ap18ehhj
    – CTACO23
    18 мая 2018 в 5:58
  • Можно просто добавить второй кнопке атрибут disabled 18 мая 2018 в 6:12
  • @AlexandrMaliovaniy мне нужно , чтоб после нажатия левой желтой кнопки - нижняя желтая работала , и наоборот. А чем тут поможет disabled?
    – CTACO23
    18 мая 2018 в 6:27

1 ответ 1

2

Ошибка в том, что при использовании 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.

6
  • 1
    А можете, пожалуйста, более сдержано описывать результаты вашей работы над вопросом? Фраза "Потратил более 30 минут, чтобы понять, прочитать и найти ошибки в вашей писанине!" противоречит важному правилу "Будьте дружелюбными" и никак не добавляет технических сведений в ваш ответ. Если вам вопрос категорически не нравится, то вы можете голосовать "против" и/или воздержаться от ответов, не тратя время на неинтересные для вас исследования кода. 18 мая 2018 в 9:56
  • @VadimOvchinnikov, а если хочется человеку помочь и помочь понять почему ему никто не помогает, то как ему объяснять? Или пусть страдает и сам додумывается почему мы все здесь такие холодные и не берёмся ему помочь? Где дружелюбие в том, чтобы не отвечать ему и не говорить ему почему ему не отвечают?
    – Bharatha
    18 мая 2018 в 10:09
  • Если хочется помочь, то это похвально. Но делайте это, пожалуйста, без личных выпадов и дружелюбно. Пару колких фраз — и человеку может перехотеться сюда заходить навсегда. 18 мая 2018 в 10:12
  • В данной ситуации чтобы сохранить своё время, вы бы могли попросить автора вопроса сократить код до минимального объёма который вопроизводит его проблему. 18 мая 2018 в 10:14
  • @VadimOvchinnikov, хорошо, буду делать так.
    – Bharatha
    18 мая 2018 в 10:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.