passing an Image array from one window to another and displaying the images in the new window in javascript

Question

I am stuck in a peculiar problem. I have to pass an image array from one HTML window to another on click of a button. The name of the array that I am passing is compareImageArray which I have declared as a global variable in mainPage.html . I am passing this array in a new window like this:

 window.open('/comparePopup',compareImageArray,'_blank','popUpWindow', 'status=0,width=620,height=430,resizable=yes, scrollbars=yes, toolbar=yes')

In the comparePopup.html , (that is the new window to which I am sending the array), I am trying to get the Image array elements in the HTML elements pic1, pic2, pic3 like this:

<div id="comparePicDiv" style="display:block;">
    <img id="pic1">
    <img id="pic2">
    <img id="pic3"> 

This I am doing in javascript like this:

<script type="text/javascript">
// alert(compareImageArray[0])
compareImageArray = window.opener.compareImageArray;

var pic1= document.getElementById("pic1");
var pic2= document.getElementById("pic2");       
var pic3= document.getElementById("pic3");

pic1.src = compareImageArray[0];           
pic2.src = compareImageArray[1];
pic3.src = compareImageArray[2];

I am able to view the image url in the alert alert(compareImageArray[0]) which means that the URL has come to this page. However, the img tags are not getting populated with these images. What could be the reason for this? Kindly help. Thanks in advance.

Answer 1

Solved the issue with the help of a friend. As I had suspected, it was not because of the way I was passing the array. The compareImageArray is declared global and was being retrieved perfectly in the comparePopup.html as confirmed by the alert.

The problem was that since the images are being loaded on body onload and not on any button click, I had to declare the image elements BEFORE the Javascript (which I was not doing.). As a result, it was failing to identify what pic1 , pic2 or pic3 is. Now it works fine!