0

Доброго времени суток!

Я недавно начал постигать азы программирования, поэтому не судите строго если будут не очень грамотные вопросы. Суть проблемы такая- делаю простейший REST веб сервис, все действие происходит в пустом теге div с id='app'. Чтобы не отнимать ваше время на чтение лишнего кода, далее приведу только тот фрагмент JS кода, который, по моему мнению, касается сути вопроса и кратко опишу что должно в нем происходить. Объявление переменных

var div = function(element){
    return document.getElementById(element);
},
cl = function(element){
    return document.getElementsByClassName(element);
},
tokenApp = "", idGoods = "",
target = {},
form = document.forms.login;

После загрузки страницы, делается GET запрос в результате которого получаем ответ в переменой response (код запроса пропускаю). На основании полученного ответа динамически в элементе div с id='app' создаю отдельные вкладки (вызов функции getGoods происходит в GET запросе)

function getGoods(response,i){
   var goods = document.createElement('div');
   div('app').appendChild(goods);
   goods.classList = 'box clearfix';
   goods.setAttribute('data-id',response[i].id);
   goods.innerHTML = "<div class='wrap clearfix'><div class='side img'>
   <img src='http://smktesting.herokuapp.com/api/products/"
   + response[i].img + "'/></div><div class='side text'><div>" +
   response[i].title + "</div><div>Product Description: " +
   response[i].text + "</div></div></div>";
}

Далее, при нажатии на любой из вкладок вызывается форма регистрации, происходит ее валидация (код этой части я тоже пропускаю)

div('app').addEventListener('click', function (e) {
   target = e.target;
   while(target!==this){
      if(target.hasAttribute('data-id')){
         idGoods = target.getAttribute('data-id');
         if(tokenApp == ""){
            cl('screen')[0].style.display = 'block';
            div('login').style.display = 'block';
         }
         return;
      }
      target = target.parentNode;
   }
})

После подтверждения успешной валидации формы, регистрации, получения токена и его передачи в новом запросе на сервер, я увеличил размеры того блока на который изначально кликнул, добавил в него еще несколько полей, в том числе поле close, которое, при нажатии, должно вернуть размеры основного блока в первоначальное состояние.

function showGoods(){
    addClass(target, 'box-rev');
    removeClass(target.children[0], 'wrap');
    addClass(target.children[0], 'wrap-rev');
    var review = document.createElement('div');
    target.appendChild(review);
    review.classList = 'wrap-rev';
    for(var i=0; i<target.children[0].children.length; i++){
       removeClass(target.children[0].children[i], 'side');
       addClass(target.children[0].children[i], 'side-rev');
    }
    review.innerHTML = "<div class='close'>[X]</div><form><div id='rate'>
    </div><textarea></textarea><input type='submit' value='Submit'/>
    </form><div></div>";
    target.addEventListener('click', function(e){
       if(e.target == cl('close')[0])
         delateRev();
    })
}

function delateRev(){
   for(var i=0; i<target.children[0].children.length; i++){
      removeClass(target.children[0].children[i], 'side-rev');
      addClass(target.children[0].children[i], 'side');
   }
   target.removeChild(target.children[1]);
   removeClass(target.children[0], 'wrap-rev');
   addClass(target.children[0], 'wrap');
   removeClass(target, 'box-rev');
}

Т.е. при нажатии на close, основной блок должен принять первоначальный вид. Но при клике на close, в консоль падает такая ошибка 'TypeError: target is null в строке if(target.hasAttribute('data-id')){' - это третья строка в функции где установлен слушатель (код этой функции приводил выше). Чтобы исключить ошибок с замыканием, метку на "кликнутый" блок я храню в глобальной переменной target, тогда она у меня видна с любой функции. При нажатии на close я не удаляю этот target. Не пойму почему такая ошибка и как ее устранить. Если мой код здесь представлен в неудобной форме, подскажите как исправить - сделаю. Буду благодарен за вашу помощь.

5
  • Вы сделайте пример для запуска, например, здесь: jsfiddle.net Иначе приходится много воображать, как оно там...
    – a-bobkov
    21 фев 2017 в 19:31
  • Попробуйте посмотреть по этой ссылке jsfiddle.net/7b3j5pkn Надеюсь получилось все правильно сделать
    – Dmitriy R
    22 фев 2017 в 17:42
  • @Dmitry R Нажимаю в этом jsfiddle на Run - ничего не происходит - ни результата в окне, ни ошибок в консоли... Не подумайте, что я придираюсь - jsfiddle - очень полезная штука при разработке в вебе.
    – a-bobkov
    22 фев 2017 в 18:26
  • Да, конечно я согласен что это классная штука. У меня тоже не получается запустить свой код в этом сервисе. Пойду разбираться как организовать в нем ajax запросы)
    – Dmitriy R
    22 фев 2017 в 19:46
  • 1
    Попробовал на другом ресурсе codepen.io/DmitriyR/pen/wJwxdM , вроде все получилось. В браузер прилетает ошибка 'TypeError: target is null в строке if(target.hasAttribute('data-id')){'.
    – Dmitriy R
    23 фев 2017 в 5:49

1 ответ 1

0

При клике на крестик срабатывает два слушателя: первый – добавленный в 193 строке, а второй – добавленный в 136 строке. Причем, в строке 204 первый слушатель удаляет из DOM элемент, внутри которого срабатывает второй слушатель. И когда второй слушатель доходит до обработки удаленного из DOM элемента, то этот элемент логично имеет parentNode === null, ведь он удален из DOM. Это и выводится в сообщении об ошибке. Вы можете легко проследить это, расставив console.log в начале каждой функции.

2
  • Точно, согласен! Буду дальше думать как повесить обработчик на крестик. Пока поместил этот крестик в основной блок с классом "box" (он же один из будущих target), но пока не очень получается повесить обработчик на крестик!
    – Dmitriy R
    23 фев 2017 в 20:23
  • console.log вам в помощь!
    – a-bobkov
    23 фев 2017 в 20:27

Ваш ответ

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

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