[RESOLVED] Passing a variable as a parameter into getElementById()?

[blakemckenna]

jmc,

I've attached a screenshot from Chrome DevTools. Also, the entire javascript is below. The getImages() function works as far as loading all the images onto the page. It's only when I click on a thumbnail do I get the error in the screenshot.

The showImage() function never executes because the alert statement never fires.

<script>
    function getImages(dirLocation) {
        var dir = dirLocation;

        var fileextension = "jpg";
        
        $.ajax({
            //This will retrieve the contents of the folder if the folder is configured as 'browsable'
            url: dir,

            success: function(data) {
                //This empty() statement clears the canvas so a new directory can be reloaded
                $("#container1").empty();

                //List all png file names in the page
                $(data).find("a:contains(" + fileextension + ")").each(function() {
                    var pathName = this.href;
                    var strLen = pathName.lastIndexOf('/');
                    var fileName = pathName.substring(pathName.lastIndexOf('/') + 1);
                    var newFileName = pathName.slice(0, strLen, pathName) + "/" + dir + fileName;     
                    var fileName2 = fileName.split('.', 1);
                    
                    var div = "<div class='images'>" +
                        "<a href=''><img id='" + fileName2 + "' onclick='showImage('" + fileName2 + "')' src='" + newFileName + "' width='450' height='auto'>" +
                        "<div class='caption'></div></a></div>"
                    
                    alert(div);
                    
                    $("#container1").append($(div));
                });
            }
        });
    }
    //
    //
    //
    function showImage(file1) {
        alert(document.getElementById(file1).value);
        
        var largeImage = document.getElementById(file1).value;
        largeImage.style.display = 'block';
        largeImage.style.width=700+"px";
        largeImage.style.height="auto";
        var url=largeImage.getAttribute('src');
        window.open(url,"_blank");
//        window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
    }
</script>

Thanks,