Random Photo from Array wont render text

[NFW]

I have an array that selects a random photo. When executed, it won't render the text out of the corresponding div statement. For the sake of curiosity, I put a "static" photo call below the array for testing. Neither is working to render the text. Again, I know I must be doing something stupid, but I can't see it.

There is a test page at: http://www.northfloridawoodworking.com/test.html.

Browsers: Chrome, Firefox, Edge
OS: Windows 10, Android

Thanks for anyone that can give me a hand with it.

Regards,
Sam Rogers

[MisterNeutron]

I ran into the same thing with my little test page. Not sure why, but if you replace the <p> tags with <div> tags in this, I believe it will work:

Code: Select all

<p align=center> 
	<script>document.write(myImage[index]); </script>
</p>

Oh, and align=center is not valid HTML5. Better:

Code: Select all

<div style="text-align:center;"> 
	<script>document.write(myImage[index]); </script>
</div>

[MisterNeutron]

I've put my demo page back up, so you can see what it's doing: (demo removed)

[NFW]

Okay, that's completely bizarre, but it worked. However, I can't think of a single reason why that would make any difference, and I'd like to find the answer.

Having said that, your fix worked like a charm. Thank you again for your help.

Regards,
Sam Rogers

[MisterNeutron]

Messy, but it has to do with the fact that a <p> element may not contain a <div> element (or any other block-level element), per the HTML specs. The opening <div> of the highslide-caption effectively closes the <p> tag. The Highslide script is now looking for an element that is a sibling of the <a> tag, but the <p> tag has now been closed, so the highslide-caption <div> isn't recognized by the script.

In short, the effect is the same as if one had written this:

Code: Select all

<p><a class='highslide' href='images/gallery1.jpg' onclick='return hs.expand(this)'>
<img src='images/gallery1.thumb.jpg' alt=''></a></p>
<div class='highslide-caption'>This is the caption</div>

The caption <div> has now become an orphan.