setInterval and setting document image failing

[seancarter]

I'm trying to implement a simple slideshow.
I have an array of image information (path and title) called "potarray".
I have a single image container in my html page.
The function startSlides is invoked when I click a button:


var i=0;
var t;

function startSlides() {
var Timer = setInterval("showNextSlide()", 2000);
}


function showNextSlide() {
if(i > potarray.length) {
i = 0;
}

document.images[0].src = potarray[i]["path"];
document.getElementById("title").innerHTML = potarray[i].title;
i++;
}


The problem is: I get an error "document.images.0 is null or undefined".
Any idea why this is?
I have other javascript for setting the image - not invoked using setInterval - which works fine.

Thanks for any help.

-Sean

[abduraooft]

Post your complete code or a link your page.
PS: Please follow http://www.codingforums.com/showthread.php?t=82672 on how to post code int this forum.

[seancarter]

Hi

I published the page here:
http://www.seancarter.f2s.com/PotsandPans/testproduct.htm

The code of the javascript file slideshow2.js is pasted here (by the way I commented out the code that reads the data from the file because that wasn't working either, but it works on my other machine fine so I'm not worrying about that for now):


// code to load initAll and functions.
addOnload(initAll);
addOnload(pans);
function addOnload(newFunction){
var oldOnload = window.onload;
if (typeof oldOnload == "function") {
window.onload = function(){
if (oldOnload) {
oldOnload();
}
newFunction();
}
}
else {
window.onload=newFunction;
}
}
function initAll() {
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
document.getElementById("startShow").onclick = startSlides;
}

var currImg=0;
var potarray = new Array();


function pots(title, path) {
this.title = title;
this.path = path;
}


function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
} else {
alert("Your browser doesn't support the XmlHttpRequest object.");
}
}

// creates a request object
var Req = getXmlHttpRequestObject();
var potStrings = "";

function pans() {
alert("opening pots.txt");

// the request object is global
// I can access it from inside the function

if(0)
{
Req.open("GET", 'pots.txt', true);

Req.onreadystatechange = function() {
// readyState is 4 when the resource is completely loaded
if (Req.readyState == 4 || Req.readyState == 2) {
potStrings = Req.responseText;

//split text into array x
x = potStrings.split("\n");

//for line in array x
for (var i = 0; i<x.length; i++) {
//split line using comma into t

t = x[i].split(",");
pot = new pots(t[0], t[1]);
potarray[i] = pot;
}
/*for (var y = 0; y<potarray.length; y++){
alert(potarray[y].title);
alert(potarray[y]['path']);
}*/
}
}

Req.send(null);
}/* end if(0) */

pot = new pots('Frying pan', 'images/FryingPan0.jpg');
potarray[0] = pot;
pot = new pots('Silver pan', 'images/FryingPan1.jpg');
potarray[1] = pot;
pot = new pots('Front view', 'images/FryingPan2.jpg');
potarray[2] = pot;




}

function processPrevious() {
newSlide(-1);
}

function processNext() {
newSlide(1);
}

function newSlide(direction) {
var imgCt = potarray.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.images[0].src = potarray[currImg]["path"];
// alert("Set src to " + document.images[0].src);
document.getElementById("title").innerHTML = potarray[currImg].title;
}

var i=0;
var t;
function startSlides() {
var Timer = setInterval("showNextSlide()", 2000);
}

function showNextSlide() {
if(i > potarray.length) {
i = 0;
}

document.write("array length = " + potarray.length + "and i = " + i);
document.write("image/path = " + potarray[i].path);

document.images[0].src = potarray[i]["path"];
document.getElementById("title").innerHTML = potarray[i].title;
i++;

}