Question

我正在尝试创建一个灯箱而我遇到了麻烦。

我认为问题是因为我有2个window.onloads，或者因为我正在尝试引用新创建的DOM元素。我在下面的代码中添加了一些注释，解释了我正在尝试做什么。

//open lightbox
window.onload = showLargeImage;

function showLargeImage() {
    var enlargeButton = document.getElementById("thumb1"); // thumb1 is a thumbnail you click to get the lightbox
    enlargeButton.onclick = handleClick;
}

function handleClick() {
    var lightboxContainerId = document.getElementById("lightboxContainer");
    lightboxContainerId.innerHTML = '<div class="lightbox"><a class="reduceButton" href="#" ><img id="imageButton" class="largeImage" src="2012/images/web/web1.jpg" width="500" height="500" alt="Web Thumb 1"></a></div>';
} // the inner HTML creates the lightbox.

//close lightbox
window.onload = reduceImage; // i'm pretty sure that this windo.onload is the problem... or, that I'm referencing "imageButton" which is new to the DOM             

function reduceImage() {
    var reduceButton = document.getElementById("imageButton"); // you're supposed to click the big image in the lightbox to get close it.  
    reduceButton.onclick = handleReduceClick;
}

function handleReduceClick() {
    var shadeId = document.getElementById("lightboxContainer");
    shadeId.innerHTML = "say what"; // closing the lightbox simply strips everything out of the lightboxContainer                
    alert("oh yeah");
}

Answer 1

以下是您的代码无效的几个原因：

showLargeImage和reduceImage在它们被分配给window.onload的位置缺少调用括号。没有括号，window.onload被赋予一个函数，但该函数没有被调用。例如，你应该有window.onload = showLargeImage（）;
如您所料，第二个window.onload会覆盖第一个。
reduceButton（正如您所怀疑的那样）在它存在之前被分配，导致错误。

这是一个可能适合您的解决方案。

HTML：

<!DOCTYPE html>
<html><head><title></title>
</head><body>

    <a href="#" id="thumb">View</a>
    <div id="lightboxcontainer"></div>

</body></html>

JavaScript的：

window.onload = function() {

    // click link to show
    var enlargeButton = document.getElementById('thumb');
    enlargeButton.onclick = function() {
        var lightboxContainerId = document.getElementById('lightboxcontainer');
        lightboxContainerId.innerHTML = '<img src="http://placehold.it/350x150"' +
                                        'width="350" height="150 alt="Thumb 1">' +
                                        '<p>Click image to hide.</p>';
    };

    // click image to hide
    var reduceButton = document.getElementById('lightboxcontainer');
    reduceButton.onclick = function() {
        reduceButton.innerHTML = ''; // removes lightbox contents         
    };
};

现场演示：http://jsfiddle.net/ericmathison/BxwYY/7/

Answer 2

如果代码放在<body>的末尾（或灯箱元素之后的任何地方），请使用此代码：

document.getElementById("thumb1").onclick = function () {
    document.getElementById("lightboxContainer").innerHTML = '<div class="lightbox"><a class="reduceButton" href="#" ><img id="imageButton" class="largeImage" src="2012/images/web/web1.jpg" width="500" height="500" alt="Web Thumb 1"></a></div>';  
    document.getElementById("imageButton").onclick = function () {
        document.getElementById("lightboxContainer").innerHTML = "say what";
        alert("oh yeah");
    };
}

这将做你想做的一切。

JavaScript windows.onload或引用新元素？

2 个答案: