Why does my anonymous function not have the context of the current object in this example?
<p>When I run this sample code in Google Chrome, the intended behavior--loading an image within a placeholder image tag on the current page--does not occur.  I checked the value of currPic when showPic() is called, and it is "undefined."  I know if I change the parameter to showPic from 'anchors[i]' to 'this', then it will work, but was trying to understand why this is so.  </p>

<pre><code>function showPic(currPic) {
    var srcLoc = currPic.getAttribute("href");
    var placeHolder = document.getElementById("placeholder");
    placeHolder.setAttribute("src", srcLoc);
    var imgLabel = document.getElementById("imglabel");
    var currLinkTitle = currPic.getAttribute("title");
    imgLabel.firstChild.nodeValue = currLinkTitle;
}

function prepareGallery() {
    if(!(document.getElementsByTagName &amp;&amp; document.getElementById)) return false;

    var imgGallery = document.getElementById("imagegallery");

    if(imgGallery) {
        var anchors = imgGallery.getElementsByTagName("a");
        var i;
        for(i = 0; i &lt; anchors.length; i++) {
            anchors[i].onclick = function() {
                showPic(anchors[i]);
                return false;
        }  
        }
    }
}
</code></pre>
