Getelementbyid?

JavaScript
1

i have some code that grabs a random image and the corresponding copy to go with it:

var imagenumber = 9 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
 
images = new Array
images[1] = "images/H-1.jpg"
images[2] = "images/H-2.jpg"
images[3] = "images/H-3.jpg"
images[4] = "images/H-4.jpg"
images[5] = "images/H-5.jpg"
images[6] = "images/H-6.jpg"
images[7] = "images/H-7.jpg"
images[8] = "images/H-8.jpg"
images[9] = "images/H-9.jpg"
var image = images[rand1]
 
links = new Array
links[1] = "http://www.green.com"
links[2] = "http://www.red.com"
links[3] = "http://www.yellow.com"
links[4] = "http://www.orange.com"
links[5] = "http://www.magenta.com"
links[6] = "http://www.purple.com"
links[7] = "http://www.darkblue.com"
links[8] = "http://www.cyan.com"
links[9] = "http://www.aqua.com"
var link = links[rand1]

var Heading = new Array()
 
Heading[1] = "green";
Heading[2] = "red";
Heading[3] = "yellow";
Heading[4] = "orange";
Heading[5] = "magenta";
Heading[6] = "purple";
Heading[7] = "dark blue";
Heading[8] = "cyan";
Heading[9] = "aqua";
 
document.write('<A HREF="' + link + '"><IMG SRC="' + image + '" border="0" width="225" height="157"></a>')


function showHeading(){document.write(Heading[rand1]);}
showHeading();

the problem is that i want to be able to apply the results to specific <div>'s. i want the results of

document.write('<A HREF="' + link + '"><IMG SRC="' + image + '" border="0" width="225" height="157"></a>')

to be applied to the <div id=“imageHolder”> and the results of

function showHeading(){document.write(Heading[rand1]);}
showHeading();

to be applied to <div id=“headingHolder”>. i suspect its somthing with getelementbyid, but i really cant figure it out. help!

2

document.write can only run before the page loads.

getElementById can only run after the page loads.

3

i see. any idea how you would re-work the above code to accomodate this? my head feels like it is going to explode!

4

The standard solution is to put the script at the bottom of the body, just before the </body> tag, and to use document.getElementById to access the page element you need.

5

Thanks for the replies. i have been messing around with the tips you guys provided yet am still having difficulties. what i have (simplified for this exercise) is a

<div id="Highlight_1"><img src="images/Highlights/H-1.jpg" width="225" height="157" alt="image1"></div>

and at the end of my document before the last </body> tag is the linked external javascript file

<script type="text/javascript" src="script-x/HighlightsRandomizer.js"></script>
```html
 - written out below is the javascript: 
```html
var imagenumber = 9 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
 
images = new Array
images[1] = "../source/RandomAll/images/i1.jpg"
images[2] = "../source/RandomAll/images/i2.jpg"
images[3] = "../source/RandomAll/images/i3.jpg"
images[4] = "../source/RandomAll/images/i4.jpg"
images[5] = "../source/RandomAll/images/i5.jpg"
images[6] = "../source/RandomAll/images/i6.jpg"
images[7] = "../source/RandomAll/images/i7.jpg"
images[8] = "../source/RandomAll/images/i8.jpg"
images[9] = "../source/RandomAll/images/i9.jpg"
var image = images[rand1]
 
links = new Array
links[1] = "http://www.green.com"
links[2] = "http://www.red.com"
links[3] = "http://www.yellow.com"
links[4] = "http://www.orange.com"
links[5] = "http://www.magenta.com"
links[6] = "http://www.purple.com"
links[7] = "http://www.darkblue.com"
links[8] = "http://www.cyan.com"
links[9] = "http://www.aqua.com"
var link = links[rand1]

document.getElementById("Highlight_1").innerHTML=('<a href="' + link + '"><IMG SRC="' + image + '" border="0"></a>');

i have tried changing the .innerHTML to alert and it pops up the randomizing message after each page reload so i know the randomization code is running, but i still get nothing. help!

6

kept messing around this morning, finally figured it out. dont know whats different (havnt looked closely yet) but it works! the winning line of code is below:

document.getElementById("Highlight_1").innerHTML = ('<A HREF="' + link + '"><IMG SRC="' + image + '" border="0"></a>');

thanks for the help.