'document[...]' is null or not an object with rotating images

**pbmods** · Aug 21 '07, 07:02 PM

Heya, BD.

It looks like this is the line that is causing you grief (in switchImage()):
[code=javascript]
document[place].src = new_image;
[/code]

Try this:
[code=javascript]
var img = document.getEle mentsByName(pla ce)[0];
if(img)
{
img.src = new_image;
}
else
{
// Debug
alert(place);
}
[/code]

**bdbeames** · Aug 21 '07, 07:31 PM

I think you are on to something, but I am still having trouble

this is what I changed the function to

[code=javascript]
function switchImage(pla ce) {
var new_image = getNextImage();
var img = document.getEle mentByName(plac e)[0];
if (img) {
img.src = new_image;
} else {
//debug
alert(place);
}
//document[place].src = new_image;
var recur_call = "switchImage('" +place+"')";
timerID = setTimeout(recu r_call, interval);
}
[/code]

IE error
Object doesn't support this property or method
line 95 char4

what am i doing wrong?

It no longer works in Mozilla as it did before I receive the error
document.getEle mentByName is not a function.

**bdbeames** · Aug 21 '07, 07:44 PM

Ok fixed my one problem it is getElementsByNa me not getElementByNam e

I'm not receiving an error in IE but my images never appear. In Mozilla I just receive the error message every 5 seconds.

Does anyone know how to fix this.

Thanks

**jx2** · Aug 21 '07, 07:49 PM

well im not an expert on this so i might be wrong
but this lines look weird to me

[code=javascript]
// those quotation marks look weird to me
// iam not sure about the purpose of it...
//wouldnt you have to use eval(recure_cal l) after that?
// pbmods probably knows
var recur_call = "switchImage('" +place+"')";

timerID = setTimeout(recu r_call, interval);

//anyway i would try to write them :

var recur_call = place;
timerID = setTimeout(swit chImage(recur_c all), interval);
}
[/code]
i hope that helped
jx2

**pbmods** · Aug 21 '07, 08:21 PM

Heya, JX2.

In this code:
[code=javascript]
var recur_call = "switchImage('" +place+"')";
[/code]

recur_call might, for example, evaluate to:
switchImage('id _weather');

However, you can also do this:
[code=javascript]
timerID = setTimeout(func tion() { switchImage(pla ce); }, interval);
[/code]

Now that I'm looking at it, you actually want to do this instead:
[code=javascript]
var img = document.getEle mentById(place) ;
if(img)
{
img.src = new_image;
}
else
{
// Debug
alert(place);
}
[/code]

The document[place] syntax confused me because long-time IE programmers often get element names and IDs confused (since IE makes them more or less equivalent; this is incidentally why a lot of IE designers abuse IDs).

**jx2** · Aug 21 '07, 08:48 PM

Originally posted by pbmods

Heya, JX2.

In this code:
[code=javascript]
var recur_call = "switchImage('" +place+"')";
[/code]

recur_call might, for example, evaluate to:
switchImage('id _weather');

However, you can also do this:
[code=javascript]
timerID = setTimeout(func tion() { switchImage(pla ce); }, interval);
[/code]

thx a lot pbmods - nice trick

- i learn a lot from you!!
hough!!

**pbmods** · Aug 21 '07, 08:52 PM

We aim to please.

**bdbeames** · Aug 21 '07, 10:05 PM

Ok I believe I got it. Thanks again for all the help.

I had one div/id working and couldn't get the other one to work.

After a long step by step walk through the problem was that one of img sets couldn't be displayed for some reason. They were .png images. I made them .jpg images and it worked. I don't understand why .png doesn't work but that was the problem.

Do either of you know why?

Anyways here is all my code if you ever have to do the same thing.

check out the site:
http://beta.climate.us urf.usu.usu.edu

[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="support/cookie.js"></script>
<script type="text/javascript" src="support/main.js"></script>
</head>

<body onload="noDiv() ">
<div id="navtrail2" >
<span onclick="switch Div('weather_pi c')"> Weather Pictures</span> :
<span onclick="switch Div('optical_pi c')"> Optical Pictures</span>
</div>

<div id="righcolbox" >
<div id="weather_pic ">
<img height="385px" width="385px" align="right" border="3"
id="id_weather " src="img/revised/1.png" alt="Weather Images" />
</div>
<div id="optical_pic ">
<img height="385px" width="385px" align="right" border="3" id="id_optical " src="img/Optics/1.jpg" alt="Optical Images" />
</div>

</div>

</body>
</html>
[/code]

[code=javascript]
//Declare and set some variables
var type;
var interval = 5000;
var random_display = 0;
var imageArray;
var imageNum = 0;
var totalImages = 0;
var image_dir;

//this function is called on page load
//it sets the divs off, looks for a cookie
//turns divs on depending on the cookie
function noDiv() {
//sets both divs display to off
$('weather_pic' ).style.display = 'none';
$('optical_pic' ).style.display = 'none';
//document.getEle mentById('weath er_pic').style. display = 'none';
//document.getEle mentById('optic al_pic').style. display = 'none';

//gets the cookie
var ImgCookie = getCookie("pic_ type");

//if cookie is set calls the switchDiv to turn the div display on
//else to defaults to the weather_pic div
if (ImgCookie) {
switchDiv(ImgCo okie);
} else {
switchDiv('weat her_pic');
}
}

//this function turns the divs on or off and sets the cookie accordingly
function switchDiv(picTy pe) {
if (picType == 'weather_pic') {
$('weather_pic' ).style.display = 'inline';
$('optical_pic' ).style.display = 'none';
//alert(picType);
cookies(picType );
rotate(picType) ;
}
if (picType == 'optical_pic') {
$('optical_pic' ).style.display = 'inline';
$('weather_pic' ).style.display = 'none';
//alert(picType);
cookies(picType );
rotate(picType) ;
}
}

//this is the set cookie function it deletes the old and sets a new for 30 days
//get, set, and deleteCookie is found in /support/cookie.js
function cookies(picType ) {
deleteCookie("p ic_type");
setCookie("pic_ type", picType, 30);
}
function rotate(picType) {
var i = 0;

if (picType == 'weather_pic') {
image_dir = "img/Optic/";
type = "id_weather ";
imageNum = 0;
imageArray = 0;
imageArray = new Array();

for (i=11; i<=20; i++) {
imageArray[imageNum++] = new imageItem(image _dir + i + ".jpg");
}
}
if (picType == 'optical_pic') {
image_dir = "img/Optics/";
type = "id_optical ";
imageNum = 0;
imageArray = 0;
imageArray = new Array();

for (i=1; i<=10; i++) {
imageArray[imageNum++] = new imageItem(image _dir + i + ".jpg");
}
}

totalImages = imageArray.leng th;
switchImage(typ e);
}

function imageItem(image _location) {
this.image_item = new Image();
this.image_item .src = image_location;
}

function switchImage(pla ce) {
var new_image = getNextImage();
var img = document.getEle mentById(place) ;
if (img) {
img.src = new_image;
} else {
//debug
alert(place);
}
//document[place].src = new_image;
var recur_call = "switchImage('" +place+"')";
timerID = setTimeout(recu r_call, interval);
}
function getNextImage() {
if (random_display ) {
imageNum = randNum(0, totalImages-1);
} else {
imageNum = (imageNum+1) % totalImages;
}

var new_image = get_ImageItemLo cation(imageArr ay[imageNum]);
return(new_imag e);
}

function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math .random() * range) + x;
}

function get_ImageItemLo cation(imageObj ) {
return(imageObj .image_item.src )
}
[/code]

thanks again

**pbmods** · Aug 21 '07, 10:25 PM

Heya, BD.

Just a guess, but maybe this had something to do with it...
[code=javascript]
imageArray[imageNum++] = new imageItem(image _dir + i + "-->.jpg<--");
[/code]

:P

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)

**bdbeames** · Aug 21 '07, 10:28 PM

Ok, give me some credit. I had it at .png, I changed it because that wouldn't work. I want to use .png images so I'll play with it until I figure it out.

thanks for the help

**pbmods** · Aug 21 '07, 10:44 PM

Heya, BD.

lol I figured. I had to point it out, though, because in your OP, one set was .jpg, while the other was .png.

'document[...]' is null or not an object with rotating images

'document[...]' is null or not an object with rotating images

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment