無法執行「節點」上的'removeChild'滑出錯誤

我有一個幻燈片輸出功能，在chrome控制檯中給了我上述錯誤。它在我的JS函數中站點行document.body.removeChild(document.getElementById("overlay04"));。我如何避免這種情況？謝謝。 test_site_link 無法執行「節點」上的'removeChild'滑出錯誤

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"); 
 
    } 
 
});

的完整代碼。這裏

來源

2016-10-05 Max Njoroge

使用調試添加一個空檢查，你會看到'restore'是在第一次點擊時從mouseup監聽器調用。算法很奇怪：添加了疊加層，以便底層按鈕不再接收任何點擊事件。有幾種方法可以正確地做到這一點。例如，使覆蓋層永久並顯示/隱藏它，將一個點擊事件附加到它上面，這將使菜單動畫化。 – wOxxOm

好主意讓我們看看 –

問題是id爲div元素「overlay04」不可用時，你所說的「恢復」功能，它在其中後「恢復」功能執行「expandOverlay」功能創建

document.getElementById("overlay04"）將null 這是爲什麼你得到類型錯誤

解決方案：在「恢復」功能

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

來源

2016-10-05 07:31:15

很好，沒有更多的錯誤，但是，該鏈接然後需要多次點擊才能打開。 –

無法執行「節點」上的'removeChild'滑出錯誤

回答

相關問題