Question

I’m building a very simple lightbox script; when you click a button, the lightbox is created. When you click on the lightbox background, it is removed.

The first time you call the function it works just fine. Click button, lightbox shows, click lightbox, it disappears. However, if you try to click the button AGAIN, nothing happens – the div isn’t called. No console errors or anything, don’t know what the problem is.

JSFIDDLE http://jsfiddle.net/3fgTC/

CODE

function closeLightBox(){
        document.body.removeChild(lightBox);
}

function createElem(){
    var elem = "<div id='lightBox'></div>";
    var bodyElem = document.body;
        bodyElem.innerHTML = elem + bodyElem.innerHTML;
    var lightBox = document.getElementById("lightBox");
        lightBox.style.width = "100%";
        lightBox.style.height = "800px";
        lightBox.style.backgroundColor = "rgba(0,0,0,.5)";
        lightBox.onclick = function(){
            closeLightBox();
        }
}
var button = document.getElementsByClassName("btn");
    for (var i = 0; i<button.length; i++){
        button[i].onclick = function(){
            createElem();
        }
    }

Any ideas?

Answer 1

Don’t prepend to innerHTML; that makes the browser re-parse the HTML and re-create every DOM element, losing event handlers in the process. Instead, use document.createElement:

var lightBox = document.createElement('div');
document.body.insertBefore(lightBox, document.body.firstChild);

Furthermore, inline closeLightBox:

lightBox.onclick = function() {
    document.body.removeChild(lightBox);
}

Try it.