why a script won't work in an iframe?

[Walter Broner]

On a page I have a table and one of the rows includes hidden divs in certain cells. There is a visible checkbox, which toggles the visibility and some other aspects of the display for the various divs.
Sample code in the table:

<tr>
<td style="width: 120px;"><div id="item1" style="width: 116px;" class="label">Cold Water</div></td>
<td style="width: 20px;"><div style="cursor: pointer;" align="center"><a onclick="toggle('PFP1A','PFP1B','PFP1C','PFP1D','PFP1E'); toggletexton('item1');"><input class="checkbox" name="checkbox" type="checkbox"></a></div></td>
<td style="width: 60px;" align="right"><div id="PFP1A" style="width: 41px;" class="label">Quantity</div></td>
<td style="width: 30px;"><div id="PFP1B" style="width: 24px;"><input style="width: 20px;" value="combobox2" name="combobox" class="box"></div></td>
<td style="width: 80px;"><div id="PFP1C"></div></td>
<td style="width: 60px;"><div id="PFP1D"></div></td>
<td style="width: 90px;"><div id="PFP1E" style="width: 90px;"></div></td>
</tr>
 

This script is in the head section:

function toggle() {
    for ( var i=0; i < arguments.length; i++ ) {
        $(arguments[i]).style.display = ($(arguments[i]).style.display != 'none' ? 'none' : 'block' );
    }
}
function toggletexton() {
    for ( var i=0; i < arguments.length; i++ ) {
        $(arguments[i]).style.color = ($(arguments[i]).style.color != '#aaaaaa' ? '#aaaaaa' : '#000000');
        $(arguments[i]).style.fontWeight = ($(arguments[i]).style.fontWeight != 'bold' ? 'bold' : 'normal');
        $(arguments[i]).style.fontStyle = ($(arguments[i]).style.fontStyle != 'normal' ? 'normal' : 'oblique');
    }
}
 

This works fine on the page. But once the page containing this is loaded into an iframe, the onclick events no longer fire. Same problem in Chrome, Firefox, Safari and MSIE.

[Dormilich]

this is due to the iframe being a separate HTML document, thus any Script or Styling from the parent document is not present inside the iframe.

[Walter Broner]

Thank you Dormilich.

The script and styling are on the page that is the source for the iframe. I have other pages which load into the parent document (also into an iframe, each iframe in its own div; those divs are stacked on top of each other and a javascript in the parent document deals with which div gets displayed - all that works like a charm).
What is a mystery to me is why some of the pages display fine both as stand-alone pages and when displayed in the parent document's iframe, but this one only works in stand-alone fashion. I checked this out on multiple browsers.

[Walter Broner]

Nobody seems to have an answer for me. To compound my confusion, for certain pages, in certain divs on the child page javascript from that page (script in the head section, function is called in "onclick" events in the body of page) works, and in other divs it does not. Go figure.
BTW, the two functions shown above, toggle nand toggletexton rely on the "$" function reproduced below. Could the way these?are set up be the culprit?

function $() {
        var elements = new Array();
        for (var i = 0; i < arguments.length; i++) {
               var element = arguments[i];
               if (typeof element == 'string')
                       element = document.getElementById(element);
               if (arguments.length == 1)
                       return element;
               elements.push(element);
        }
        return elements;
}

Thanks all.