Не удалось выполнить 'removeChild' при ошибке вывода 'узла'

#javascript #jquery #google-chrome-devtools

#javascript #jquery ( jquery ) #google-chrome-devtools #jquery

Вопрос:

У меня есть функция выдвигания, которая выдает мне указанную выше ошибку в консоли Chrome. Он размещает строку document.body.removeChild(document.getElementById("overlay04")); в моей функции JS. Как мне этого избежать? Спасибо. тест_сайт_ссылка

 function expandOverlay() {
  var overlay = document.createElement("div");
  overlay.setAttribute("id", "overlay04");
  overlay.setAttribute("class", "overlay04");
  document.body.appendChild(overlay);
  $(overlay).hide().fadeIn(80);
}

function restore() {
  document.body.removeChild(document.getElementById("overlay04"));
}

// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();

$(document).ready(function() {
  $('.slideout-menu-toggle').on('click', function(event) {
    event.preventDefault();
    // toggle open class
    slideoutMenu.toggleClass("open");

    // slide menu
    if (slideoutMenu.hasClass("open")) {
      slideoutMenu.animate({
        left: "0px"
      }, 160);
      expandOverlay();
    } else {
      slideoutMenu.animate({
        left: -slideoutMenuWidth
      }, 160);
      restore();
    }
  });

});

window.addEventListener('mouseup', function(event) {
  var box = document.getElementById('menu_s');
  if (event.target != box amp;amp; event.target.parentNode != box) {
    slideoutMenu.animate({
      left: -slideoutMenuWidth
    }, 160);
    restore();
    slideoutMenu.toggleClass("open");
  }
});

Полный код.

1. Используйте отладчик, и вы увидите restore , вызывается из прослушивателя мыши при первом щелчке мыши. Ваш алгоритм странный: наложение добавляется так, что базовая кнопка больше не получает никаких событий нажатия. Есть несколько способов, как это сделать правильно. Например, сделайте наложение постоянным и покажите / скройте его, прикрепите к нему событие щелчка, которое оживит меню.

2. хорошая идея, давайте посмотрим

Ответ №1:

Проблема здесь в том, что элемент div с идентификатором ‘overlay04’ недоступен при вызове функции ‘restore’, он создается в функции ‘expandOverlay’, которая выполняется после функции ‘restore’

document.getElementById("overlay04" ) будет ли null это причиной того, что вы получаете TypeError

Решение: Добавьте нулевую проверку в функцию ‘restore’

 function restore() {
  var $overlay04 = document.getElementById("overlay04");
  if ($overlay04) {
    document.body.removeChild($overlay04);
  }
}