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

What I have is a is two sets of images,(Weather, optical) there is about 30 images of is each set.

I have script that will rotate through the images on the main page.

The user is able to view one or the other img sets with a simple onclick

This works great in Mozilla but in IE I get the error document[...]null or not an object, line 95, char 4.

I've spent hours on this, but no luck.

javascript

Expand|Select|Wrap|Line Numbers

 
//Declare and set some variables

var type;

var interval = 5000;

var random_display = 0;

var imageArray;

var imageNum = 0;

var totalImages = 0;
 
//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';
 
   //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(ImgCookie);

   } else {

      switchDiv('weather_pic');

   }

}
 
//this function turns the divs on or off and sets the cookie accordingly

function switchDiv(picType) {

   if (picType == 'weather_pic') {

      $('optical_pic').style.display = 'none';

      $('weather_pic').style.display = 'inline';

      cookies(picType);

      rotate(picType);

   }

   if (picType == 'optical_pic') {

      $('weather_pic').style.display = 'none';

      $('optical_pic').style.display = 'inline';

      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("pic_type");

   setCookie("pic_type", picType, 30);

}

function rotate(picType) {

   //var type;

   //var interval = 5000;

   //var random_display = 0;

   //var imageArray = new Array();

   //var imageNum = 0;

   var i = 0;
 
   if (picType == 'weather_pic') {

      var image_dir = "img/revised/";

      type = "id_weather";

      imageNum = 0;

      imageArray = 0;

      imageArray = new Array();
 
      for (i=1; i<=26; i++) {

         imageArray[imageNum++] = new imageItem(image_dir + i + ".png");

      }

   }

   if (picType == 'optical_pic') {

      var image_dir = "img/Optics/";

      type = "id_optical";

      imageNum = 0;

      imageArray = 0;

      imageArray = new Array();
 
      for (i=1; i<=56; i++) {

         imageArray[imageNum++] = new imageItem(image_dir + i + ".jpg");

      }

   }
 
   totalImages = imageArray.length;

   switchImage(type);

}
 
function imageItem(image_location) {

   this.image_item = new Image();

   this.image_item.src = image_location;

}
 
function switchImage(place) {

   var new_image = getNextImage();

   document[place].src = new_image;

   var recur_call = "switchImage('"+place+"')";

   timerID = setTimeout(recur_call, interval);

}

function getNextImage() {

   if (random_display) {

      imageNum = randNum(0, totalImages-1);

   } else {

      imageNum = (imageNum+1) % totalImages;

   }
 
   var new_image = get_ImageItemLocation(imageArray[imageNum]);

   return(new_image);

}
 
function randNum(x, y) {

   var range = y - x + 1;

   return Math.floor(Math.random() * range) + x;

}
 
function get_ImageItemLocation(imageObj) {

   return(imageObj.image_item.src)

}

noDiv() is called from the page load and the java works from there.
This problem is in my switchDiv() function, but I haven't been able to solve it.

here is the html

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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="switchDiv('weather_pic')"> Weather Pictures</span> :

               <span onclick="switchDiv('optical_pic')"> Optical Pictures</span>

            </div>

               <!-- Start right Column box -->

               <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>
 
               <!-- End right Column box -->

               </div>

</body>

</html>

could someone help with this?

Aug 21 '07 #1

Subscribe Post Reply

2095

pbmods

5,821

Expert 4TB

Heya, BD.

It looks like this is the line that is causing you grief (in switchImage()):

Expand|Select|Wrap|Line Numbers

document[place].src = new_image;

Try this:

Expand|Select|Wrap|Line Numbers

 
var img = document.getElementsByName(place)[0];

if(img)

{

    img.src = new_image;

}

else

{

    // Debug

    alert(place);

}

Aug 21 '07 #2

bdbeames

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

this is what I changed the function to

Expand|Select|Wrap|Line Numbers

 
function switchImage(place) {

   var new_image = getNextImage();

   var img = document.getElementByName(place)[0];

   if (img) {

      img.src = new_image;

   } else {

      //debug

      alert(place);

   }

   //document[place].src = new_image;

   var recur_call = "switchImage('"+place+"')";

   timerID = setTimeout(recur_call, interval);

}

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.getElementByName is not a function.

Aug 21 '07 #3

bdbeames

Ok fixed my one problem it is getElementsByName not getElementByName

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

Aug 21 '07 #4

jx2

228

100+

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

Expand|Select|Wrap|Line Numbers

 
// those quotation marks look weird to me

// iam not sure about the purpose of it... 

//wouldnt you have to use eval(recure_call) after that?

// pbmods probably knows 

   var recur_call = "switchImage('"+place+"')";
 
   timerID = setTimeout(recur_call, interval);
 
//anyway i would try to write them :
 
   var recur_call = place;

   timerID = setTimeout(switchImage(recur_call), interval);

}

i hope that helped
jx2

Aug 21 '07 #5

pbmods

5,821

Expert 4TB

Heya, JX2.

In this code:

Expand|Select|Wrap|Line Numbers

var recur_call = "switchImage('"+place+"')";

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

However, you can also do this:

Expand|Select|Wrap|Line Numbers

timerID = setTimeout(function() { switchImage(place); }, interval);

Now that I'm looking at it, you actually want to do this instead:

Expand|Select|Wrap|Line Numbers

 
var img = document.getElementById(place);

if(img)

{

    img.src = new_image;

}

else

{

    // Debug

    alert(place);

}

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).

Aug 21 '07 #6

jx2

228

100+

Heya, JX2.

In this code:

Expand|Select|Wrap|Line Numbers

var recur_call = "switchImage('"+place+"')";

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

However, you can also do this:

Expand|Select|Wrap|Line Numbers

timerID = setTimeout(function() { switchImage(place); }, interval);

thx a lot pbmods - nice trick

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

Aug 21 '07 #7

pbmods

5,821

Expert 4TB

We aim to please.

Aug 21 '07 #8

bdbeames

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.usurf.usu.usu.edu

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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="switchDiv('weather_pic')"> Weather Pictures</span> :

   <span onclick="switchDiv('optical_pic')"> Optical Pictures</span>

</div>

<!-- Start right Column box -->

<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>

<!-- End right Column box -->

</div>
 
</body>

</html>

Expand|Select|Wrap|Line Numbers

 
//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.getElementById('weather_pic').style.display = 'none';

   //document.getElementById('optical_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(ImgCookie);

   } else {

      switchDiv('weather_pic');

   }

}
 
//this function turns the divs on or off and sets the cookie accordingly

function switchDiv(picType) {

   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("pic_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.length;

   switchImage(type);

}
 
function imageItem(image_location) {

   this.image_item = new Image();

   this.image_item.src = image_location;

}
 
function switchImage(place) {

   var new_image = getNextImage();

   var img = document.getElementById(place);

   if (img) {

      img.src = new_image;

   } else {

      //debug

      alert(place);

   }

   //document[place].src = new_image;

   var recur_call = "switchImage('"+place+"')";

   timerID = setTimeout(recur_call, interval);

}

function getNextImage() {

   if (random_display) {

      imageNum = randNum(0, totalImages-1);

   } else {

      imageNum = (imageNum+1) % totalImages;

   }
 
   var new_image = get_ImageItemLocation(imageArray[imageNum]);

   return(new_image);

}
 
function randNum(x, y) {

   var range = y - x + 1;

   return Math.floor(Math.random() * range) + x;

}
 
function get_ImageItemLocation(imageObj) {

   return(imageObj.image_item.src)

}

thanks again

Aug 21 '07 #9

pbmods

5,821

Expert 4TB

Heya, BD.

Just a guess, but maybe this had something to do with it...

Expand|Select|Wrap|Line Numbers

imageArray[imageNum++] = new imageItem(image_dir + i + "-->.jpg<--");

:P

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

Aug 21 '07 #10

bdbeames

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

Aug 21 '07 #11

pbmods

5,821

Expert 4TB

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.

Aug 21 '07 #12

by: Winfried Koenig | last post by:

Hi everyone, I have a main page: -------------------------------------------------- <html><head><title>Test</title> </head><body> <img id="img_a" name="img_a" src="image_1.png" alt=""><br>

Javascript

document.form.submit()

by: Chris | last post by:

Heres my problem: <a href="javascript:void(document.buysell.submit())" target="_parent" onMouseOver="MM_swapImage('members','','images/membersf2.gif',1)" onMouseOut="MM_swapImgRestore()"><img...

Javascript

document property of object?

by: Aaron | last post by:

Hi, I've seen javascript code where a constructor function is passed an argument "document", and inside the function itself the assignment "this.document = document;" is made. This is the code...

Javascript

Rotating images and different image dimensions

by: John | last post by:

I am rotating images at one location of my web site. My problem is if I set the width and height of the new image before I show the new image, the old image is stretched first to the new image...

Javascript

Rotating random images from a directory.

by: Sandy Bremmer | last post by:

I have seen many Javascripts that rotate images with each load or refresh of the page but so far all I've found require hard coding the image filename into the script. Does anyone know of a script...

Javascript

136

Javascript Best Practices Document v1.0

by: Matt Kruse | last post by:

http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...

Javascript

'document[...]' is null or not an object

by: bdbeames | last post by:

Could someone help with this? I currently have a rotating picture that I have on our website's main page. This week we decided to add another set of pictures for users to view. The users can...

Javascript

document.getElementById stopped working after adding an iframe

by: AC | last post by:

I had a page that does some event setup on window.onload: function prepEvents() { document.getElementById("menumap_sales").onmouseover = swapMenuSales; // etc } window.onload = prepEvents;

Javascript

document.forms[0].radtripType is undefined

by: ankit1999 | last post by:

I have a problem, everytime i'm run this page http://click2travel.in/index.php i get the this error,,,

Javascript

How to Use CodiumAI's pr-agent?

by: erikbower65 | last post by:

Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...

General

Speedup your spring application

by: linyimin | last post by:

Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...

General

Steps manually installing IntelliJ IDEA.

by: erikbower65 | last post by:

Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...

General

Access Europe meeting on Wed 6 Sept - Database Analyzer and other tools

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

How to insert a new record in a database

by: Taofi | last post by:

I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...

DB2 Database

To verify entry of a dropdown

by: DJRhino | last post by:

Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...

Microsoft Access / VBA

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

How to calculate date of retirement from date of birth

by: Mushico | last post by:

How to calculate date of retirement from date of birth

Data Management

Windows 11 and Access Combo Box Issue

by: DJRhino | last post by:

Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

Microsoft Access / VBA

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

Similar topics