Question

我有一个滑出功能，在chrome控制台中给出了上述错误。它在我的JS函数中找到了行document.body.removeChild(document.getElementById("overlay04"));。我该如何避免这种情况？谢谢。 test_site_link

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 && event.target.parentNode != box) {
    slideoutMenu.animate({
      left: -slideoutMenuWidth
    }, 160);
    restore();
    slideoutMenu.toggleClass("open");
  }
});

完整代码。

Answer 1

这里的问题是当你调用'restore'函数时，id'overlay04'的div元素不可用，它在'expandOverlay'函数中创建，该函数在'restore'函数之后执行

document.getElementById("overlay04"）将null 这就是为什么你得到TypeError

解决方案：在“恢复”功能

中添加空检查

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

无法在“节点”滑出错误上执行“removeChild”

1 个答案: