How do I change the background image of 1 HTML window from another HTML window?

As the title of this question sez :

How do I change the background image of 1 HTML window from another HTML window ?

I have 9 HTML windows.

Call them ‘HTMLWindow_0’ & HTMLWindow_1’ through ‘HTMLWindow_8’.

HTML Window1 has a background image and a set of 8 buttons.

Each button opens up a new HTML window with a different background image.

Call them ‘HMTLWindow_1’ though ‘HTMLWindow_8’.

In other words, Button–n on ‘HTMLWindow_0’ creates ‘HTMLWindow_n’.

Each of the HTML windows created by the set of buttons on ‘HTMLWindow_0’ has a background image associated with it.

Background image x is associated with HTMLWindow_x.

The HTML & Javascript for ‘HTMLWindow_0’ is in a file called ‘HTMLWindow_0.html’.

The HTML for ‘HTMLWindow_1’ through ‘HTMLWindow_8’ is in a file called ‘HTMLWindow_x.html’.

The set of file pathnames for the images used as backgrounds for the HTML windows 1 though 8 are stored in a Javascript array called ‘Image_Array’ in the file ‘HTMLWindow_0.html’.

The HTML that acts upon button clicks in HTMLWindow_0 is as follows :

<div class="toc_button_01"><button onClick="changePage ('Toc 01',  2)"> </button></div>
 <div class="toc_button_02"><button onClick="changePage ('Toc 02',  4)"> </button></div>
<div class="toc_button_03"><button onClick="changePage ('Toc 03',  5)"> </button></div>
<div class="toc_button_04"><button onClick="changePage ('Toc 04',  6)"> </button></div>
<div class="toc_button_05"><button onClick="changePage ('Toc 05',  7)"> </button></div>
<div class="toc_button_06"><button onClick="changePage ('Toc 06',  8)"> </button></div>
<div class="toc_button_07"><button onClick="changePage ('Toc 07',  9)"> </button></div>
 <div class="toc_button_08"><button onClick="changePage ('Toc 08', 10)"> </button></div>

In other words, clicking on any of the 8 buttons activates a JavaScript function called ‘changepage’.

‘changepage’ looks like this :

function changePage (buttonName,
            buttonNumber)
{
    alert (   "We're in the 'changePage' function !" 
            + "\n"
            + "We just clicked on the "
            +  buttonName
            + " button !"
            + "\n"
            + "Button Number  = "
            +  buttonNumber
            + "\n"
            + "Current Page URL = "
            +  Image_Array [buttonNumber]); 

document.getElementById("image1").src = Image_Array [buttonNumber];
    generatePageContent (buttonNumber);

} // End of function changePage ()

‘changepage’ in turns calls another JavaScript function called ‘ generatePageContent’.

‘generatePageContent’ is the actual JavaScript function that creates the new HTML windows 1 through 8 depending on which button was pushed on ‘HTMLWindow_0’.

‘generatePageContent’ looks like this :

function generatePageContent (buttonNumber)
{
    alert (   "We're in the 'generatePageContent' function !"
            + "\n"
            + "Button Number  = "
            +  buttonNumber
            + "\n"
            + "Current Page URL = "
            +  Image_Array [buttonNumber]); 

    var newWindow = window.open (' HTMLWindow_x.html ',
'',
'width = 788, height = 632, left = 100, top = 200, toolbar = yes');

    newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];

} // End of function generatePageContent ()

I have no problem creating any of the new HTML windows 1 through 8.

In other words, the line :

var newWindow = window.open (' HTMLWindow_x.html ',
'',
'width = 788, height = 632, left = 100, top = 200, toolbar = yes');

in the Javascript function ‘generatePageContent’ will create any of the HTML windows 1 through 8 depending on which button 1 through 8 was clicked on ‘HTMLWindow_0’.

However the line :

newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];

in the Javascript function ‘generatePageContent’ doesn’t work.

This is the line that is supposed to change the background image in the creatED HTML windows 1 through 8.

It is simply ignored.

The interesting thing is that I have no problem changing the background image in the calling HTML window ‘HTMLWindow_0’.

The line :

document.getElementById("image1").src = Image_Array [buttonNumber];

inside the Javascript function ‘开发者_开发技巧changepage’ handles this fine.

So, I guess the actual question is :

Why does :

document.getElementById("image1").src = Image_Array [buttonNumber];

inside the Javascript function ‘changepage’ change the background image in ‘HTMLWindow_0’ but

newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];

inside the Javascript function ‘generatePageContent’ doesn’t change the background image in any of ‘HTMLWindow_0’ through HTMLWindow_8’ ?

The ‘image1’ reference inside the JavaScript function ‘changePage’ refers to the following HTML code inside file HTMLWindow_0 :

     <div class="img1">
         <img   id      = "image1"
                src     = "../BookListPages/ClearingThePath/CTP-02.tiff" 
                alt     = "Clearing The Path ..." 
                width   = "765" 
                height  = "580" 
                border  = "2" 
         /> <!-- End of img tag. -->
    </div>

The ‘image2’ reference inside the JavaScript function ‘generatePageContent’ refers to the following HTML code inside file HTMLWindow_x :

     <div class="img">
         <img   id      = "image2"
                src     = "../BookListPages/NoSuchPageForThisBook.tif" 
                alt     = "Clearing The Path ..." 
                width   = "765" 
                height  = "580" 
                border  = "2" 
         /> <!-- End of img tag. -->

In other words, and simply put, I’m trying to create an HTML window from inside another HTML window using a button inside the creatING window and I want to vary the background image of the creatED HTML window depending on which button was clicked on in the creatING window.

What am I missing/screwing up here ?

I apologize for the complexity of this post but I wanted to make sure that I’ve clearly explained exactly what I’m trying to do and I’ve provided all the HTML and the Javascript source involved in supporting what it is I’m trying to do here.

Finally, I’d like to thank everyone in advance for whatever advice, help, references and suggestions you can give me towards resolving this problem.

This is how I started. This worked.

var newWindow = window.open('HTMLWindow_x.html', '', 'width = 788, height = 632, left = 100, top = 200, toolbar = yes');
setTimeout(function() { 
    window.focus();
    newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];
}
, 2000); // I tend to use extreme values when bumping into issues like these.. just to see

Using the setTimeout kinda showed me it was a 'timing' issue. This made me think that maybe the opened window wasn't loaded yet.. The next step in your debugging process could make you realize that you should be using newWindow.onload..
Here's a complete working sample:

html1.html

    <html>
        <head></head>
        <body>
            <div class="img">
                 <img id="image2" src= "0.png" alt= "Clearing The Path ..." width="765" height="580" border="2" />
            </div>
        </body>
    </html>

html0.html

<html>
        <head>
            <script>
function changePage(buttonName,
                buttonNumber)

{
    document.getElementById("image1").src = Image_Array [buttonNumber];
    generatePageContent (buttonNumber);

}
function generatePageContent (buttonNumber)
{
    try {
        var newWindow = window.open (' html1.html ', 'someWindowName', 'width = 788, height = 632, left = 100, top = 200, toolbar = yes');
        newWindow.onload = loadSecondWindow.apply(this, [buttonNumber, newWindow]);
    } 
    catch(e)
    {
        // although IE throws a 'not implemented' exception here, it changes the image..
        // does anyone know why?
    }
}

function loadSecondWindow(buttonNumber, newWindow)
{
    setTimeout(function() { 
        //window.focus();
        newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];           
    }, 500); // I started with a timeout of 2000 
}

var Image_Array = {};
Image_Array['0'] = '0.png';
Image_Array['1'] = '1.png';

function curry() {
    if (!arguments.length) return this;
    var __method = this, args = slice.call(arguments, 0);
    return function() {
      var a = merge(args, arguments);
      return __method.apply(this, a);
    }
  }
            </script>
        </head>
        <body>
        <div class="toc_button_01">
        <button onClick="changePage ('Toc 01',  1)"> open html1.html</button></div>
            <div class="img1">
                 <img   id      = "image1"
                        src     = "0.png" 
                        alt     = "Clearing The Path ..." 
                        width   = "765" 
                        height  = "580" 
                        border  = "2" 
                 /> <!-- End of img tag. -->
        </div>
        </body>
    </html>